BFC的特性和作用

最新推荐文章于 2022-04-07 17:57:06 发布

Lance2574

最新推荐文章于 2022-04-07 17:57:06 发布

阅读量586

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/Lance2574/article/details/120535225

版权

一、什么是BFC

BFC(Block formatting context)

直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

在理解BFC之前，我们需要先了解下常见的定位方案：

1.默认文档流

默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下：

元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。
块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。
行内元素与其他元素共享一行空间，宽高由其内容所决定。

2.浮动布局

浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），根据浮动的方向尽可能向左或向右偏移。

3.定位布局

绝对定位：元素整体会脱离默认文档流，因此绝对定位的元素不会对兄弟元素造成影响。

而BFC属于默认文档流。

二、如何触发BFC，如何为元素添加BFC这个属性

1.根元素 (<html>)

2.浮动元素(元素的float值不是none)

3.绝对定位(元素的position为absolute或fixed)

4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、

table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid

5.overflow值不为visible的元素

6.contain的值为layout-content,paint的元素

三、BFC的作用

1、可以避免外边距重叠

html代码
  <div class="cube"></div>
  <div class="cube"></div>

css代码
  .cube{
      width: 100px;
      height: 100px;
      background-color: cyan;
      margin: 100px;
   }

本应该上面div的margin-bottom和下面div的margin-top都为100px，呈现200px的外边距，但是块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等，则仅为一个，就呈现了100px，这就是外边距重叠。

解决办法：

把两个div包裹在两个不同container容器中，用over-hidden触发container的BFC

    <style>
        .container{
            overflow: hidden;
        }
        .cube{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }
    </style>
<body>
    <div class="container">
        <div class="cube"></div>
    </div>
    <div class="cube"></div>
</body>

效果如下：

2.清楚浮动

css代码
.parent{
    border: 10px solid red;
}
.child{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: left;
}
	
html代码
<div class="parent">
    <div class="child"></div>
</div>

正常我们希望的是看到一圈红色边框包裹着一个黄色方块，但是父元素失去了高度支撑；因为我们添加了浮动，使得子元素脱离了文档流，所以只剩下20px边距高度。效果如下：

解决办法：

给父元素设置overflow属性触发父容器的BFC

<style>
    .parent{
        border:10px solid red;
        overflow: hidden;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
</style>

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

效果如下：

3.阻止元素被浮动元素覆盖

给一个元素添加浮动属性，覆盖了另一个元素。

css代码
.cube1{
      width: 100px;
      height:100px;
      background-color: red;
      float: left;
  }
  .cube2{
      width: 200px;
      height:200px;
      background-color: blue;
  }

html代码
 <div class="cube1"></div>
 <div class="cube2"></div>

解决办法：

如果不要覆盖，设置overflow:hidden，触发被覆盖元素的BFC属性

<style>
    .cube1{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .cube2{
        width: 200px;
        height: 200px;
        background-color: blue;
        overflow: hidden;
    }
</style>

<body>
    <div class="cube1"></div>
    <div class="cube2"></div>
</body>

效果如下：