目錄
一 常見的定位方案
1. 普通流（所有元素默認(rèn)為普通流的定位）
2. 浮動(dòng)
3. 絕對(duì)定位
二? BFC?
1. 定義
2. 觸發(fā)條件
3.?作用
（1）?避免外邊距重疊
?（2）清除浮動(dòng)
（3）?阻止元素被浮動(dòng)元素覆蓋
一 常見的定位方案
? ? ? ? 首先，先了解一下常見的定位方案。有三種：普通流（默認(rèn)）、浮動(dòng)、絕對(duì)定位。
1. 普通流（所有元素默認(rèn)為普通流的定位）
2. 浮動(dòng)
3. 絕對(duì)定位
二? BFC?
1. 定義
????????BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，屬于上面提到的定位方案中的普通流。
????????我們可以把BFC看成頁(yè)面中的一塊渲染區(qū)域。它有自己的渲染規(guī)則。簡(jiǎn)單來說，BFC可以看作元素的一種屬性，當(dāng)元素?fù)碛辛薆FC這個(gè)屬性的時(shí)候，這個(gè)元素就可以看作是隔離了的獨(dú)立容器。容器里面的元素不會(huì)在布局上影響到外面的元素。
2. 觸發(fā)條件
? ? ? ? 如果元素種有以下任一屬性，就將觸發(fā)BFC。
3.?作用
（1）?避免外邊距重疊
????????外邊距重疊現(xiàn)象：如下代碼，希望的結(jié)果是，上下兩個(gè)div的間距應(yīng)該是200px，但是實(shí)際上只有100px。原因：塊的上外邊距margin-top 和下外邊距 margin-bottom 會(huì)合并為單個(gè)邊距，其大小為單個(gè)邊距的最大值。如果這兩個(gè)邊距相等的話，則為其中一個(gè)。
解決辦法：
????????將兩個(gè)div放到不同的BFC中。那么這兩個(gè)BFC中的內(nèi)容將不會(huì)相互干擾。代碼如下：
（2）清除浮動(dòng)
????????示例：以下定義兩個(gè)div，呈父子關(guān)系，并為子元素設(shè)置float:left。理想情況是一個(gè)紅色邊框包裹一個(gè)藍(lán)色方塊。但是實(shí)際效果如下。原因是：子元素設(shè)置了浮動(dòng)，脫離了文檔流，所以就只剩下了2px的邊框高度。
解決辦法：
????????給父容器添加overfloat：hidden 屬性，觸發(fā)父容器的BFC，那么父容器就會(huì)包含子容器，從而達(dá)到了清除浮動(dòng)的作用。
（3）?阻止元素被浮動(dòng)元素覆蓋
????????示例：如下兩個(gè)div，其中一個(gè)設(shè)置了浮動(dòng)，可以看到浮動(dòng)的元素覆蓋到了沒有設(shè)置浮動(dòng)的元素之上。原因：設(shè)置了浮動(dòng)的元素脫離了文檔流，就導(dǎo)致元素重疊。
解決辦法：
????????觸發(fā)正常元素的BFC屬性。在第二個(gè)元素中加上overfloat屬性，這樣兩個(gè)元素就互不干擾。
文章來源：http://www.zghlxwxcb.cn/news/detail-848798.html
備注：本文是看視頻 帶你用最簡(jiǎn)單的方式理解最全面的BFC?后的記錄。文章來源地址http://www.zghlxwxcb.cn/news/detail-848798.html
到了這里，關(guān)于了解CSS中的BFC以及用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
