BFC：块级格式化上下文

最新推荐文章于 2023-05-15 23:05:13 发布

Neil-

最新推荐文章于 2023-05-15 23:05:13 发布

阅读量263

点赞数

分类专栏： web前端 css 文章标签： BFC 块级格式化作用域高度塌陷 margin重叠清除浮动

本文链接：https://blog.csdn.net/luofeng457/article/details/90757968

版权

web前端同时被 2 个专栏收录

98 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

BFC

含义： BFC（Block Formatting Context），即块级格式化上下文，是css视觉渲染的一部分；通常出现在一个块级元素中的浮动元素与其他元素的相互作用中，故对元素定位和清除浮动有重要意义；
块级格式化上下文触发条件：
1. 文档根元素（<html>）
2. 值不为none的float属性；
3. 值为absolute及fixed的position属性；
4. 值不为visible的overflow属性的元素；（auto / scroll / hidden，visible是默认值）
5. 具有display: inline-block的元素；
6. 具有display: flex | inline-flex的元素；
7. 具有display: grid |inline-grid的元素；
8. 具有display: table-cell或display: table-caption元素（HTML标签中的table cell和table captIon默认为该值）；
9. 具有属性display: table | inline-table | table-row | table-row-group | table-header-group | table-footer-group的元素；
10. 具有display: flow-root的元素；（与display: block相似，但是会产生一个新的BFC）；
11. 具有contain: content | strict | layout的元素；
特性：块级格式化上下文就像一个个独立的容器，作用域限于当前BFC内，彼此之间的元素不受影响；

应用

清除浮动
当一个元素包含浮动的子元素时，如果父元素没有其他子元素或者浮动子元素高度高于其他子元素，就会导致父元素的高度塌陷；使用BFC特性，在父级元素添加属性oveflow: auto或overflow: hidden则可以清楚浮动的影响（对内部子元素及其他外部元素）；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .float {
      float: left;
      background: lightblue;
      height: 100px;
    }
    #container {
      overflow: hidden;
      border: 1px solid green;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="float">this is a float box</div>
  </div>
</body>
</html>

在这里插入图片描述

margin collapse（边距重叠）

边距重叠指的是两个相邻或者嵌套的块，之间没有任何非空元素的隔离而直接接触，会产生边距重叠的现象；
外边距重叠的规则：a. 两个边距均为正值或均为负值，取绝对值大的值（查看demo）；b. 两个边距值符号相反，取两者的和（查看demo）；
通过创建新的BFC可以避免两个相邻的div元素发生外边距重叠；

// 外边距重叠示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container {
      margin: 0;
      padding: 0;
      border: 1px solid red;
    }
    .part1 {
      width: 100px;
      height: 100px;
      margin: 10px;
      background: orange;
    }
    .part2 {
      width: 100px;
      height: 100px;
      margin: 10px;
      background: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="part1"></div>
    <div class="part2"></div>
  </div>
</body>
</html>

在这里插入图片描述
可以看到，.part1的下边距和.part2的上边距发生了重叠；将两者放入不同的BFC中可以解决该问题；具体可以查看demo，结果如下：其实只要将其中一个part放到wrapper中产生BFC，就可以消除margin collapsing问题。
在这里插入图片描述

浮动元素与非浮动元素的布局问题——基于BFC的两栏布局
浮动元素非浮动元素相邻排列时，可能对非浮动元素的排版造成影响；可以查看demo，示意图如下，浮动的图片占据了非浮动div的左边区域；（float出现的初衷就是为了实现图片的文本环绕效果，因此float属性不会覆盖文本内容）

在div.desc上加入overflow: hidden;属性创建一个新的BFC，从而使之不被浮动元素覆盖；查看demo，结果示意图如下；借此实现了zuolankuanduguding左栏宽度固定，右栏宽度自适应的两列布局；