前端學習第三周BFC的學習

標籤：

BFC之前學的時候沒太懂，後來專門複習了下。

BFC(Block formatting context):可以直接翻譯為"塊級格式化上下文"，它是一個獨立的渲染地區，只有Block-level box參與，它規定了內部的Block-level Box如何布局，並且與這個地區外部毫不相干。

 

BFC的布局規則：1.內部的Box會在垂直方向，一個一個的放置；2.Box垂直方向的距離由margin決定。且同一個BFC的兩個相鄰Box的margin會發生重疊；3.每個元素的margin box的左邊，與包含塊boeder box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此。4.BFC的地區不會與float box重疊；5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子項目不會影響到外面的元素，反之也是如此；6.計算BFC的高度時，浮動元素也參與計算。

 

產生BFC的元素：根項目、float屬性不為none、position為absolute或fixed、display為inline-block，table-cll，table-caption，flex,inline-flex、overflow不為visible。

 

BFC的作用：1.自適應兩欄布局；2.清楚內部浮動；3.防止垂直margin重疊。

 

BFC內部元素與外部元素不會相互影響，因此，當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動重疊。同樣，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的道理。

前端學習第三周BFC的學習