什么是 css BFC？触发 BFC 的条件是什么？有哪些应用场景？
最编程
2024-05-30 15:59:42
...
BFC(Box Formatting context):box是css布局的对象和基本单位，bfc就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
块级格式化上下文布局规则
内部的box会在垂直方向一个接一个的放置
属于同一个bfc的两个相邻box的margin会重叠；不同bfc就不会
是页面上一个隔离的独立容器，里面的元素不会影响到外面的元素；反之亦然；
bfc的区域不会和float box重叠
计算bfc的高度，浮动元素也参与计算
a. body根元素
b. float属性不为none
c. position为absolute或 fixed
d. overflow不为visible
e. display为inline-block,table-cell,table-caption,flex,inline-flex
a. 清除内部的浮动，触发父元素的bfc属性，会包含float元素：防止浮动导致父元素高度塌陷父级设置overflow:hidden,元素float:right
b. 分属于不同的bfc，可以阻止margin重叠：避免margin重叠，两个块相邻就会导致外边距被折叠，给中间的设置bfc就会避免，方法就是套个父级设置overflow:hidden
c. 阻止元素被浮动元素覆盖，各自是独立的渲染区域
d. 自适应两栏布局
e. 可以解决文字环绕的问题