CSS 核心概念概括之定位和 BFC

定位

流定位

普通流定位的元素不能經過left/top屬性來指定其x/y座標，流定位的元素上下排布的區塊元素的縱向邊距會被合併，左右排布的內聯元素的橫向邊距不會合並，須要各自獨立計算。

浮動定位

浮動模型是一種可視化格式模型，浮動的框能夠左右移動，直到它的外邊碰到包含框或者另一個浮動的元素邊框。浮動元素不在普通的文檔流中，文檔的普通流元素表現的就像浮動的元素不存在同樣。

相對定位

相對定位的元素會在文檔中佔據原來的位置，只是表現出來的位置會改變。

絕對定位

絕對定位的元素位置與文檔流無關，也不會佔據文檔流的空間，普通流中的元素佈局就像絕對定位的元素不存在同樣。

固定定位

相對於視口進行定位。

BFC

BFC全稱是Block Formatting Context即塊級格式化上下文。

三個特徵

• BFC會阻止垂直外邊距的摺疊。(當同屬一個BFC時，兩個元素有可能發生垂直的重疊，要解決margin重疊，只要讓他們不在同一個BFC就好了，對於兩個相鄰的元素來講，意義不大，沒有必要給他加一個外殼，可是對於嵌套元素來講就頗有必要了，只要把父元素設置爲BFC就好了，這樣元素的margin就不會和父元素的margin重疊了)
• BFC不會重疊浮動元素
• BFC能夠包含浮動

造成BFC的條件

• float:left|right
• overflow:hidden|auto|scroll
• display:table-cell|table-caption|inline-block
• position:absolute|fixed

通用的清除浮動的方式

.clearfix {
    *zoom: 1;
}

.clearfix::after {
    content: '';
    display:block;
    height: 0;
    visibility: hidden;
    clear:left;
}複製代碼

.clearfix {
  *zoom: 1;
}
.clearfix::after {
    content: '';
    display: table;
    clear:both;
}複製代碼

總結

清除浮動只有兩種方式，一是使用clear屬性清除浮動，二是使父容器造成BFC。