淺談BFC

時間 2019-11-11

標籤淺談 bfc 简体版

原文原文鏈接

1.BFC 定義css

　　BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。佈局

2.BFC的生成學習

上文提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素決定，CSS2.1中規定知足下列CSS聲明之一的元素便會生成BFC。spa

根元素
float的值不爲none
overflow除visible之外的值 (hidden、auto、scroll)
display的值爲inline-block、table-cell、table-caption
position的值爲absolute或fixed

3. BFC的約束規則3d

內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊（塌陷），與方向無關。）
每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
BFC的區域不會與float的元素區域重疊
計算BFC的高度時，浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然

看到以上的幾條約束，想一想咱們學習css時的幾條規則code

Block元素會擴展到與父元素同寬，因此block元素會垂直排列
垂直方向上的兩個相鄰DIV的margin會重疊，而水平方向不會(此規則並不徹底正確)
浮動元素會盡可能接近往左上方（或右上方）
爲父元素設置overflow：hidden或浮動父元素，則會包含浮動元素

4. BFC在佈局中的應用orm

　　4.1防止margin重疊（塌陷）　　xml

<style>
        .topBox{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
        .bottomBox{width: 200px;height: 200px;background-color: black;margin-top: 30px;overflow: hidden;}
</style>
<body>
        <div class="topBox"></div>
        <div class="bottomBox"></div>
</body>

　　margin塌陷問題：在標準文檔流中，塊級標籤之間豎直方向的margin會以大的爲準，這就是margin的塌陷現象。能夠用overflow：hidden產生bfc來解決。blog

<style>
    .box{overflow: hidden;}
    .topBox{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
    .bottomBox{width: 200px;height: 200px;background-color: black;margin-top: 30px;overflow: hidden;}
</style>
<body>
    <div class="topBox"></div>
    <div class="box">
        <div class="bottomBox"></div>
    </div>
</body>

　　給其中一個子元素嵌套一個DIV，經過給這個DIV設置屬性觸發BFC就能夠解決問題。文檔

　　4.2清除內部浮動

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
     </div>
</body>

這能夠看到由於子元素浮動形成父元素高度塌陷,這時候經過在父元素上添加overflow:hidden;觸發BFC就能解決這個問題了。

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow: hidden;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

　　4.3 兩欄佈局

　　　　問題案例：div浮動兄弟這該問題：因爲左側塊級元素髮生了浮動，因此和右側未發生浮動的塊級元素不在同一層內，因此會發生div遮擋問題。能夠給右側元素添加 overflow: hidden，觸發BFC來解決遮擋問題。

<style>
    .floatBox{
        height: 100px;
        width: 100px;
        float: left;
        background: lightblue;
    }
    .ordinaryBox{
        width: 200px; 
        height: 200px;
        background: grey;
    }
</style>
<body>
    <div class="floatBox">
        我是一個左浮動的元素
    </div>
    <div class="ordinaryBox">
        我是一個沒有設置浮動, 也沒有觸發 BFC 元素, width: 200px; height:200px; background: grey;
    </div>
</body>

這時候其實第二個元素有部分被浮動元素所覆蓋，可是文本信息不會被浮動元素所覆蓋，若是想避免元素被覆蓋，可觸發第二個元素的BFC特性，在第二個元素中加入overflow：hidden，就會變成:

1. 淺談BFC
2. 淺談bfc
3. 談談BFC
4. 淺談BFC—CSS的低調大佬
5. 淺談BFC的基本知識
6. BFC淺析
7. 淺析BFC
8. 談BFC和haslayout
9. BFC模型淺識
10. BFC之淺析篇
更多相關文章...
• NoSQL和傳統數據庫有什麼區別？NoSQL能取代傳統數據庫嗎？ - Redis教程
• MyBatis SqlSessionFactory - MyBatis教程
• 漫談MySQL的鎖機制
• Docker容器實戰(八) - 漫談 Kubernetes 的本質

相關標籤/搜索

每日一句

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