CSS3 之 BFC

linsir 一啵叶

于 2023-06-09 17:50:45 发布

阅读量110

点赞数 1

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_53165476/article/details/131131549

版权

BFC（BlockFormattingContext，块级格式化上下文）是CSS布局中的一个重要概念，通过开启BFC，可以解决子元素margin塌陷、防止元素被浮动元素覆盖以及确保元素自身高度不因内部浮动元素而塌陷等问题。开启BFC的方法包括设置根元素、浮动元素、绝对定位元素等。文章提供了具体的代码示例展示BFC在解决这些问题上的作用。

摘要由CSDN通过智能技术生成

1、BFC描述：

如何开启BFC：
1）根元素
2）浮动元素
3）绝对定位、固定定位的元素
4）行内块元素
5）表格单元格: table、thead、 tbody、tfoot、th、td、tr、captionoverflow 的值不为 visible 的块元素
6）伸缩项目
7）多列容器
8）column-span 为all的元素(即使该元素没有包裹在多列容器中)
9）display 的值，设置为 flow-root

2、开启BFC能解决的问题：

1）元素开启BFC后，其子元素不会再产生 margin 塌陷问题

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .outer {
      width: 400px;
      background-color: gray;
    }

    .inner {
      width: 100px;
      height: 100px;
      margin: 20px;
    }

    .inner1 {
      background-color: orange;
    }

    .inner2 {
      background-color: green;
    }

    .inner3 {
      background-color: deepskyblue;
    }
  </style>

<body>
  <div class="outer">
    <div class="inner inner1"></div>
    <div class="inner inner2"></div>
    <div class="inner inner3"></div>
  </div>
</body>

解决方案：

2）元素开启BFC 后，自己不会被其他浮动元素所覆盖。

<style>
    .box {
      width: 100px;
      height: 100px;
    }

    .box1 {
      background-color: orange;
      float: left;
    }

    .box2 {
      background-color: green;
    }
  </style>

<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

解决方案：

3）元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

 <style>
    .outer {
      width: 400px;
      background-color: grey;
    }

    .inner {
      width: 100px;
      height: 100px;
      float: left;
    }

    .inner1 {
      background-color: orange;
    }

    .inner2 {
      background-color: green;
    }
  </style>

<body>
  <div class="outer">
    <div class="inner inner1"></div>
    <div class="inner inner2"></div>
  </div>
</body>