BFC（Block Formatting Context）是Web布局中的一种重要概念，它定义了一个独立的渲染区域，防止内部元素对外部的影响。触发BFC的条件包括浮动元素、绝对定位、overflow不为visible等。BFC的特性包括垂直排列子元素、清除浮动、解决外边距合并问题。通过理解和利用BFC，开发者可以更好地控制网页元素的布局和样式。
什么是BFC？
BFC全称是(Block Formatting Context) 块级格式化上下文，就是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素。有一个独立的块级渲染区域，该区域有一套渲染规则来约束盒子的布局，与外部的区域没有关系。
透过现象看本质 ：BFC就是符合一些特性的HTML标签
触发BFC
- float 的值不为 none
- position 的值为 absolute 或 fixed
- overflow 的值不为 visible (hidden,auto,scroll)
- display 的值不为 inline-block 、flex、inline-flex
BFC的特性
- 内部Box会垂直方向上一个接一个放置
- 垂直方向上的距离由magin决定
- BFC的区域不会与float元素区域重叠
- 计算BFC的高度时 浮动元素也参与计算
- BFC就是页面上一个独立的容器
- 容器里面的子元素不会影响到外面
BFC的作用
- 清除浮动：overflow：hidden
- 解决外边距合并问题：同属于一个BFC的两个盒子外边距会重叠，设置不属于同一个BFC的和盒子就不会重叠
2720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
