BFC理解

Block formatting context （塊級格式化上下文）

頁面文檔由塊block構成每一個block在頁面上佔據本身的位置
使用新的元素構建BFC overflow：hidden | auto | scroll；只要不爲visible 新的空間
告訴瀏覽器，外面的環境影響不到我了我從新來進行Block formatting 佈局和定位 css

核心：html

新的BFC，給出了新的不受外界影響的塊級格式化環境  
block 塊級-> 頁面的基礎  
formatting context 格式化-> 渲染

瀏覽器構建文檔樹的時候佈局和定位元素

網頁的定位（大）文檔流正常，浮動，定位，flex，table
廣義的定位塊級元素的定位垂直的定位；行內元素左右定位經過內容來肯定
狹義的定位：
float 浮動元素，在一行的開始或者結束
flex 彈性佈局
position瀏覽器

BFC 在正常的文檔流裏面重建一個新的上下文環境ide

BFC的約束規則

1、在瀏覽器進行頁面元素佈局的時候同一個BFC的兩個相鄰的Box的margin 會重疊，與方向無關佈局

破壞規則建立新的BFC Context上下文的概念

如何建立BFC？=>從新規劃一個（獨立）渲染區域flex
- 根元素body，自然是一個BFC
- overflow:hidden;
- float 不爲none
- display:inline-block | table-cell |table-caption
- position:absolute | fixed 只要不爲static

> 好像只剩塊級元素和行內元素不是BFC

2、BFC的高度，浮動元素也要參與計算code

在元素 float 以後脫離了文檔流沒有辦法計算確切高度，這種狀況咱們稱之爲高度塌陷。解決高度塌陷的前提就是 能識別並 包含到浮動元素。 而BFC就有這個特性，因此BFC也能夠計算浮動元素的高度。新建BFC讓浮動元素也參與計算

<style>
        *{padding: 0;margin: 0;}
        .par{
            border: 5px solid #fcc;
            width: 300px;
            /*這裏的overflow並非爲了超出則隱藏，而是爲了建立一個BFC*/
            /* overflow: hidden; */
            display: inline-block;
        }
        .child{
            border: 5px solid #f66;  
            width: 100px;
            height: 100px;
            float: left;
            /* clear: both; */
        }
    </style>
</head>
<body>
    <!-- 網頁的定位（大） 文檔流正常，浮動，定位，flex，table -->
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

3、每一個元素的左邊，要與包含盒子的左邊相接觸
4、BFC的區域不會與float box重疊

<style>
        *{padding: 0;margin: 0;}
        .aside{
            float: left;
            width: 100px;
            height: 150px;
            background-color: #ff6666;
        }
        .main{
            height: 200px;
            background: #ffcccc;
            /* clear: left; */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 自適應兩欄式佈局 相似於flex：1；
    aside 和 main 處於同一BFC（body）下 
    BFC佈局規則3 規則4 -->
    <div class="aside"></div>
    <div class="main"></div>
</body>

/*BFC在三欄式佈局中的應用*/
    <style>
        *{padding: 0;margin: 0;}
        .container{
            height: 200px;
        }
        .left,.right,.center{
            height: 200px;
        }
        .left{
            background: pink;
            float: left;
            width: 180px;
        }
        .right{
            background: lightblue;
            width: 180px;
            float: right;
        }
        .center{
            background: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 三欄式佈局 -->
    <div class="container">
        <!-- 頁面的結構與呈現效果不一致？想一下 -->
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div>
</body>

注意：orm

經過 overflow:hidden將元素轉換爲BFC，當然能夠解決高度塌陷的問題，可是大範圍的應用在佈局上是確定是行不通的，畢竟overflow會形成溢出隱藏的問題，特別是與JS交互的效果時。

那有沒有一個更好的高度檢測方法呢？
答案是有的，就是咱們常常用到的clearfix。htm

.clearfix:after{
    content:'';
    display:table;
    clear:both
}
.clearfix{
    *zoom:1;/* IE6,7不支持BFC，因此須要經過專有的CSS屬性，觸發hasLayout。*/
}

關於zoom:1blog

瀏覽器構建文檔樹的時候 佈局和定位元素

BFC的約束規則

瀏覽器構建文檔樹的時候佈局和定位元素