float 設計的目的
實現(xiàn)文字環(huán)繞圖片顯示效果
清除 float 帶來的影響
- float 元素底部插入 clear 的 block 水平元素。
特點：與外界可以聯(lián)系，比如 margin 重疊。
實現(xiàn)方式：
/* HTML block 水平元素走起 */
<div ...></div>
/* CSS after 偽元素底部生成 */
.clearfix:after {
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
/* 或者 */
.clearfix:after {
content: '';
display: table;
clear: both;
}
- 父元素 BFC 化
特點：不與外界聯(lián)系，比如不會發(fā)生 margin 重疊
/* BFC 通常聲明 */
float: left/right
position: absolute/fixed
overflow: hidden/scroll
display: inline-block/table-cell
對 float 特性濫用（使用 float 來砌磚頭）
原因：
- float 使元素 block 塊狀化（磚頭化）
- 破壞性造成的緊密排列特性（去空格化）—— HTML 中標簽間空隙會轉(zhuǎn)化為一個空格間隙、但是 float 后空格間隙會消失；如果是 實現(xiàn)的空格在 float 后不會消失，只是圖文環(huán)繞后移動到后面了。
float 與流體布局
- 圖文環(huán)繞
/* float 元素 */
/* 后面是 inline 跟隨元素 */
- 左右各有元素，中間元素在剩余空間居中對齊
<div>
<p style="float: left">左邊很長很長很長很長</p>
<p style="float: right">Just Right</p>
<div style="text-align: center;">我在剩余空間居中對齊</div>
<div style="clear:both;"></div>
</div>
效果圖.png
- 左側(cè)固定，右側(cè)自適應的流體布局
<div>
/* float: left; width: 75px */
/* margin-left/padding-left: 75px */
<div>
- 右側(cè)固定，左側(cè)自適應
可以使用上面左側(cè)固定的方式，但是代碼會將 float:right 右側(cè)的元素寫在 DOM 流的前面，有點不符合習慣，所以換一種方式。
<div class="container" style="float: left; width: 100%">
/* 內(nèi)容區(qū)域：margin-right/padding-right: 75px */
/* 右側(cè)固定內(nèi)容：float: left; margin-left: -75px; width: 75px */
</div>
- 左右兩邊都自適應
右邊可以根據(jù)左邊的寬度自動填滿，再也不用把左邊的寬度寫死了。
/* 左邊元素：float: left */
/* 右邊自適應內(nèi)容：display: table-cell */
