【轉】BFC-塊級格式化上下文

時間 2019-11-08

標籤 bfc 格式化上下文简体版

原文原文鏈接

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

1、BFC佈局規則：ide

一、內部的Box會在垂直方向排列。
二、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
三、每一個元素的margin box的左邊，與包含塊border box的左邊相接觸。
四、BFC的區域不會與float box重疊。
五、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
六、計算BFC的高度時，浮動元素也參與計算。佈局

2、哪些元素會生成BFC?flex

一、根元素
二、float屬性不爲none
三、position爲absolute或fixed
四、display爲inline-block, table-cell, table-caption, flex, inline-flex
五、overflow不爲visiblespa

3、BFC的做用及原理code

自適應兩欄佈局htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        body {
            width: 300px;
            position: relative;
        }

        .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }

        .main {
            height: 200px;
            background: #fcc;
             /*overflow: hidden;*/
        }
    </style>
</head>

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

</html>

當觸發main生成BFC後（去掉代碼中註釋便可），這個新的BFC不會與浮動的aside重疊。所以會根據包含塊的寬度，和aside的寬度，自動變窄。效果以下rem

清除內部浮動it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .par {
            border: 5px solid #fcc;
            width: 300px;
             /*overflow: hidden;*/
        }

        .child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }
    </style>
</head>

<body>
<div class="par">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>

</html>

爲達到清除內部浮動，咱們能夠觸發par生成BFC（去掉代碼中註釋便可），那麼par在計算高度時，par內部的浮動元素child也會參與計算。效果以下io

防止垂直 margin 重疊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .wrap {
            /*overflow: hidden;*/
        }

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

<body>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>
</body>

</html>

咱們能夠在p外面包裹一層容器，並觸發該容器生成一個BFC（去掉代碼中註釋便可）。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。效果以下