bfc與浮動元素的關係

標籤：頁面   pos   上下   html   div2   概念   瀏覽器   一個   color   

首先說明兩個特性：

1，浮動元素兄弟元素的布局規則

當html中存在浮動元素時，其兄弟元素的布局遵循如下規則：

（1）區塊層級元素的渲染無視浮動元素

（2）常值內容或者是行內元素的渲染會考慮到浮動元素的存在

形象一點來講就是沒有浮動的區塊層級元素在瀏覽器上佔位置的時候看不到浮動元素的存在，所以浮動元素所佔據的位置對它來講還是可用的

但是常值內容或行內元素在瀏覽器上佔位置的時候還是會看到浮動元素的存在，所以它是不會跑到浮動元素的位置上去的，所以基於這樣的特性，

我們再來看看這樣的代碼

        .div1{            width: 100px;            height: 100px;            float: left;            background-color: black;        }        .div2{            width: 200px;            height: 200px;            background-color: green;            opacity: 0.6;        } <div class="div1"></div> 123    <span>456</span>    <div class="div2"></div>

上面代碼在瀏覽器訪問的效果是這樣的

黑色div浮動了，此時沒有浮動的塊級div就覆蓋到了黑色div上方，不過因為綠色div前面有非浮動元素存在，所以它往下靠了一些，

而再看常值內容123以及包含內容456的span，它們都排在了浮動元素的後面，那下面在講述最終問題之前還是先看看下一個概念bfc

2，bfc

bfc指的是block format context，意為塊級格式上下文，當元素具有某些特定的樣式時會觸發元素變為bfc元素，而觸發bfc的元素將會改變一小部分的渲染規則，可用於解決一些css的疑難bug

那麼如何才能觸發bfc呢？

一般來講，如果一個元素具有以下其中一個樣式，則這個元素變成了bfc元素，其渲染規則將會發生一些變化，這些樣式有：

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden;

 

現在再回過頭來看看第一個特性中提到的例子，先給div2加上一個overflow:hidden的樣式，修改後樣式如下

        .div2{            width: 200px;            height: 200px;            background-color: green;            opacity: 0.6;            overflow: hidden;        }

然後再看看頁面效果

 

此時綠色div不再無視黑色div的存在了，而是也排在了黑色div後面，所以本例子所展示的就是觸發了bfc的元素改變了原本區塊層級元素的布局無視浮動元素的特性，

而這一特性其實可以運用到解決子項目浮動父元素無法被子項目撐開高度的問題中，不過這個問題其實更好的解決方案是清除浮動，這裡只是說明觸發bfc能夠改變元素的部分渲染規則這一特點，

畢竟實際中硬是要給元素寫上特定的樣式以觸發bfc可能會違背原本的布局要求，反而撿了芝麻丟了西瓜

 

bfc與浮動元素的關係