clear：left/right/both;.blankdiv父元素加上乙個類名叫clearfix；在clearfix的最後，新增了乙個after的偽元素，通過清除偽元素浮動，達到撐起父元素高度的目的。
.clearfix:after4.overflow清除浮動
給父元素新增overflow：auto/hidden...;(除了visible之外的屬性都可以)，這樣父元素的高度立刻就被撐起來
那麼父元素是怎樣被撐起來的呢？
塊級格式化上下文（bfc）：它是一塊區域，規定了內部塊盒的渲染方式以及浮動相互之間的影響關係；
bfc特點：
bfc有自己的一套內部子元素渲染規則，不影響外部渲染，也不受外部渲染影響
外部任何浮動元素區域和bfc區域是涇渭分明的，不可能重疊
bfc在計算高度時，內部浮動元素的高度也要計算在內，即使bfc區域只有乙個浮動元素，bfc的高度也不會發生塌陷，其高度大於等於浮動元素的高度
當乙個bfc區域是乙個浮動盒子的兄弟節點時，bfc會首先在浮動元素旁邊渲染，若寬度不夠，則在下方渲染
構建bfc區域的方法
float的值不為none（left/right）
overflow的值不為visible（hidden/auto）
display的值為table-cell/table-caption/inline-block
position的值不為static或relative（absolute/fixed）
bfc的作用
防止margin重疊：可以將兩個元素放在不同的bfc中，就可以防止margin重疊（主要用於巢狀元素）
在浮動問題中，防止產生塌陷（子浮動元素也參與高度計算）
與浮動元素相鄰的已生成bfc的元素不能與浮動元素相互覆蓋
多欄布局（左右固定，中間自適應）
.left{
float:left;
width:180px;
.center{
overflow:hidden;
height:150px;
.right{
float:right;
width:180px;
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...
BFC塊級格式化上下文
塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。根元素 浮動元素 元素的 float 不是 none 絕對定位元素 元素的 position 為 absolute 或 fi...