關於BFC佈局的那些事

時間 2019-11-10

標籤關於 bfc 佈局那些简体版

原文原文鏈接

關於BFC的那些事

一、什麼是BFC？

它是Block Formatting Context（塊級格式化上下文）的簡稱。css

二、什麼是Block Formatting context?

Formatting context是指頁面中的一塊渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。
最多見的Formatting cocntext 有Block formatting context（簡稱BFC）和Inline formatting (簡稱IFC).瀏覽器

三、細談BFC

BFC是指一個獨立的塊級渲染區域，只有Block-level Box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
BFC就是一種佈局方式，能夠理解爲一個做用範圍，即在一個BFC裏的佈局與其以外的佈局不相關或者說不相互影響。ide

四、使用BFC的緣由：

使用必定的CSS聲明能夠生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則咱們能夠達到必定的佈局效果，爲了達到特定的佈局效果咱們讓元素生成BFC。佈局

五、哪些元素能夠生成BFC？

當一個HTML元素知足下面條件的任何一點，均可以生成Block formatting context.flex

根元素
float的值不爲none
overflow的值不爲visible（能夠爲hidden，scroll，auto）
display的值爲inline-block，table-cell，table-captain，flex，inline-flex中的任何一個
position的值爲absolute，fixed(不爲static，relative中的任何一個)
display : table也認爲能夠生成BFC，其實這裏主要緣由在於table會默認生成一個匿名的table-cell,正是這個匿名的table-cell生成了BFC。

六、經常使用的用來觸發BFC的CSS樣式：

overflow : scroll（可能會顯示沒必要要的滾動條）
overflow : hidden（將會剪掉溢出的元素，不須要給BFC元素設置寬度）
display : flex
float : left（將會把元素置於它的左邊，其餘元素環繞着它）
display : table-cell(必須給BFC元素設置無限大的寬度)3d

七、BFC的佈局規則

內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin 決定（完整的說法是：屬於同一個BFC的兩個相鄰的Box的margin會發生重疊，與方向是無關的）
每一個盒子的左外邊框緊挨着包含塊的左邊框（從右到左的格式，則爲緊挨右邊框），即便浮動元素也是如此。（這說明BFC中的子元素不會超出他的包含塊，也就是他的父級塊狀元素）
BFC的區域不會與float的元素區域重疊
計算BFC的高度時，浮動元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素

一、自適應兩欄佈局

body{
            width:300px;
        }
        .aside{
            width:100px;
            height:150px;
            float:left;
            background:#f66;
        }
        .main{
            height:200px;
            background:#ffc;
            overflow:hidden;
        }

<body>

    <div class="aside"></div>
    <div class="main"></div>

</body>

效果以下：
code

在不加overflow:hidden;以前的效果：
orm

由於根據BFC佈局規則第三條可知道：
每一個元素的margin box的左邊，與包含塊border box的左邊相接處（對於從左到右的格式化，不然相反）。雖然存在浮動的元素aside，但main的左邊依然會與包含塊的左邊相接處。blog

在加了overflow : hidden 以後aside就造成了一個BFC，這個新的BFC不會與浮動的aside重疊，main會根據包含塊的寬度，和aside的寬度，自動邊窄。it

二、清除內部浮動

.parent{
            width:300px;
            border:5px solid #fcc;
        }
        .child{
            width:100px;
            height:100px;
            border:5px solid #f66;
            float:left;
        }

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

結果：

緣由是：計算BFC的高度時，浮動元素也參與計算
改變的方法是：爲達到清除內部浮動，咱們能夠觸發parent生成BFC，那麼parent在計算高度時，parent內部的浮動元素child也會參與計算。

.parent{
            width:300px;
            border:5px solid #fcc;
            overflow:hidden;
        }

結果是：

三、放置垂直margin重疊

p{
            color:#f55;
            background:#fcc;
            width:200px;
            line-height:100px;
            text-align:center;
            margin:100px;
        }

<p>Haha</p>
    <p>HeHe</p>

結果以下：

解決辦法：

p{
            color:#f55;
            background:#fcc;
            width:200px;
            line-height:100px;
            text-align:center;
            margin:100px;
        }
        .ddd{
            overflow:hidden;
        }

<p>Haha</p>

    <div class="ddd">
       <p>HeHe</p>
    </div>

結果：

緣由就是：BFC佈局規則的第二條;
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
現象：兩個p之間的距離爲100px，發送了margin重疊。
解決方案：咱們能夠在p外面包裹一層容器，並觸發該容器生成一個BFC，那麼兩個p便不屬於同一個BFC，就不會發生margin重疊。

在這裏總結了一下，就是，若是一旦造成BFC，那麼這個BFC就是一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。