CSS 核心概念歸納之定位和 BFC

蕭瀟發表於2017-08-01
CSS

定位

流定位

普通流定位的元素不能通過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。

相關文章