本文介绍了BFC（BlockFormattingContext）的概念，包括其特性如清除浮动、外边距折叠和独立性。BFC用于解决父元素高度塌陷问题，以及如何通过根元素、CSS属性和浮动来触发BFC。
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档介绍：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素（简单来说就是盒子里面的元素不会影响盒子外面的元素）
创建了BFC的元素有一下特征：
1.清除浮动只能清除同一 BFC中它面前的元素的浮动
2.外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间
3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
4.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与运算
5.浮动元素区域不叠加到BFC上
它可以解决：
1.解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
2.解决子级元素外边距会使父级元素塌陷的问题
如何触发BFC
1.根元素（<html>）
2.overflow:不为visible的属性，父元素有高度 避免使用hidden属性
3.display：inline-block、table-cell、table-caption、flex等
4.position：absolute、fixed
5.元素设置浮动：float 除 none 以外的值
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
