BFC总结

目录

什么是BFC？

BFC(Block formatting context)直译为"块级格式化上下文"

是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

作用： 父级元素形成独立渲染区域（BFC），内部元素渲染不会影响到外部。

形成BFC的条件？

  1. 浮动元素，float 不是 none；

  2. 定位元素，position（absolute，fixed）；

  3. display为特定值元素，例如（包括但不限于）：

    • flex
    • inline-block
    • flow-root（新属性）
    • table-cell
    • table-row
    • table-caption

  4. 块级元素 overflow 不是 visible （hidden，auto，scroll）；

BFC的特性

  1. BFC的区域不会与float元素的区域重叠（清浮动）
  2. 计算BFC的高度时，float元素也参与计算（清浮动）
  3. 父子元素，父元素触发BFC，可以避免垂直方向上，margin穿透（应用该特性，为兄弟元素包装一层BFC元素，可以解决垂直并排元素margin重叠问题）
  4. BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC的应用

  1. 清除浮动

    • 解决父元素高度塌陷
    • 防止文字环绕

  2. 防止margin重叠

    • 防止父子元素 margin重叠
    • 防止上下兄弟元素 margin 重叠

    ps: 解决父子元素 margin 重叠还可以使用：在两个外边距之间加上border或者padding，防止它们折叠

代码检验

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      background-color:cornflowerblue;
    }
    .img {
      width: 200px;
      float: left;
    }
    .bfc {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="container bfc"> <!-- 清浮动 -->
    <img class="img" src="https://i0.hdslb.com/bfs/face/member/noface.jpg@160w_160h_1c_1s.jpg" alt="">
    <p class="bfc">哈哈哈哈哈哈哈哈</p> <!-- 防止文字环绕 -->
  </div>
</body>
</html>

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://www.cnblogs.com/chen-cong/p/7862832.html
https://juejin.cn/post/6950082193632788493
《深入解析CSS》3.4 外边距折叠

posted @ 2022-01-17 14:43  Better-HTQ  阅读(42)  评论(0)  编辑  收藏  举报