关于前端:BFC

44次阅读

共计 2204 个字符，预计需要花费 6 分钟才能阅读完成。

BFC 是一个独立的布局环境，它外部的元素布局与外界互不影响。
产生了 BFC 的元素内的布局环境：

计算该元素的高度时, 浮动子元素的高度也参加计算
BFC 区域不会与非该区域内的浮动元素重叠
创立 BFC 的元素不会与它的子元素进行外边距合并, 即：处于不同 BFC 区域的元素之间不会产生外边距合并。

BFC 渲染区域由某个 HTML 元素创立, 以下元素会创立：

根元素（html 元素）
浮动、相对与固定定位元素
overflow 不等于 visible 的块盒
display 为 inline-block、table-cell、table-caption、flex 的元素

1、个别状况下，在计算元素高度不会将其子元素中的浮动元素计算在内：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {border: 1px solid red;}
        
        .left {
            width: 30px;
            height: 30px;
            float: left;
            margin: 0 10px;
            background: #008c8c;
            text-align: center;
            line-height: 30px;
        }
    </style>
    <body>
        <div class="main">
          <div class="left">1</div>
          <div class="left">2</div>
          <div class="left">3</div>
          <div class="left">4</div>
        </div>
    </body>

显示成果如下：

咱们通过设置 main 元素 overflow:hidden 让其产生 BFC 区域：

    <style>
        * {
            margin: 0;
            padding: 0;
          }
        
        .main {
            border: 1px solid red;
            overflow: hidden;
        }
        
        .left {
            width: 100px;
            height: 100px;
            float: left;
            margin: 0 10px;
            background: #008c8c;
            text-align: center;
            line-height: 100px;
        }
    </style>
    <body>
        <div class="main">
            <div class="left">1</div>
            <div class="left">2</div>
            <div class="left">3</div>
            <div class="left">4</div>
        </div>
    </body>

失去的成果为：

2、个别状况下, 惯例流块盒在排列时会疏忽浮动元素，导致被浮动元素被笼罩，例如：

<style>
      * {
            margin: 0;
            padding: 0;
        }
        
        .item1 {
            width: 100px;
            height: 100px;
            float: left;
            background: blue;
        }
        
        .item2 {
            height: 200px;
            background: red;
        }
</style>
<body>
    <div class="item1"></div>
    <div class="item2"></div>
</body>

成果如下：

通过设置 item2 元素的 overflow:hidden 让其产生 BFC 区域

<style>
      * {
            margin: 0;
            padding: 0;
        }
        
        .item1 {
            width: 100px;
            height: 100px;
            float: left;
            background: blue;
        }
        
        .item2 {
            height: 200px;
            background: red;
            overflow:hidden;
        }
</style>
<body>
    <div class="item1"></div>
    <div class="item2"></div>
</body>

item2 在排列的时候避开了浮动元素 item1，成果如下：

3、在有时候咱们会发现，父子元素之间产生了外边距合并：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .parent {
            width: 300px;
            height: 300px;
            background: red;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .children {
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 10px;
        }
</style>
<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>

成果如下：

咱们通过设置 parent 元素的 overflow：hidden 使其产生 BFC 区域

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .parent {
            width: 300px;
            height: 300px;
            background: red;
            margin-top: 30px;
            margin-left: auto;
            margin-right: auto;
            overflow:hidden;
        }
        .children {
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 10px;
        }
</style>
<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>

成果如下：

以上这三种状况是 BFC 常见的利用：