BFC

lewis 1年前 (2024-03-24) 阅读数 6 #技术

BFC(块级格式化上下文)BFC是什么

BFC是一个独立的布局环境，它内部的元素布局与外界互不影响。
产生了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常见的应用：

解决浮动元素令父元素高度坍塌问题解决非浮动元素被浮动元素覆盖的问题解决外边距合并的问题

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：阿里云服务器实例选购下一篇：云主机是什么意思?企业如何选云主机?(dmz主机是什么意思)

BFC

版权声明

作者文章