淺析前端BFC佈局

時間 2019-11-12

標籤淺析前端 bfc 佈局简体版

原文原文鏈接

1、常見定位方案

2、BFC 概念

BFC 即 Block Formatting Contexts (塊級格式化上下文)，它屬於上述定位方案的普通流。css

它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。app

通俗一點來說，能夠把 BFC 理解爲一個封閉的大箱子，箱子內部的元素不管如何翻江倒海，都不會影響到外部。佈局

3、BFC 佈局規則

內部的Box會在垂直方向，一個接一個地放置；
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊；
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此；
BFC的區域不會與float box重疊；
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此；
計算BFC的高度時，浮動元素也參與計算。

4、BFC 觸發條件

根元素；
float屬性不爲none（能夠是left、right）；
position爲absolute或fixed；
display爲inline-block, table-cell, table-caption, flex, inline-flex；
overflow不爲visible（能夠是hidden、scroll、auto）。

5、BFC 做用

1. 清除內部浮動flex

　　咱們在佈局時常常會遇到這個問題：對子元素設置浮動後，父元素會發生高度塌陷，也就是父元素的高度變爲0。解決這個問題，只須要把把父元素變成一個BFC就好了。經常使用的辦法是給父元素設置overflow:hidden。spa

2. 垂直margin合併3d

　　在CSS當中，相鄰的兩個盒子的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。
　　摺疊的結果：code

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是二者的相加的和。

3. 建立自適應兩欄佈局orm

    <body>
        <div class="wrapper">
            <div class="float-left">Float left box</div>
            <p>
                正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
                正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
            </p>
        </div>
    </body>

        <style type="text/css">
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            .wrapper{
                background: blue;
                padding:10px;
                color:#fff;
            }
            .float-left{
                float:left;
                background: mediumvioletred;
                padding:5px;
                opacity: 0.5;
            }
            p{
                line-height:30px;
                background: red;
            }
        </style>