如何开启BFC

html-css0156

如何开启BFC,第1张

根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动的子元素

1、设置元素浮动 float

2、设置元素绝对定位 position: absolute

3、设置元素为inline-block

4、将元素的overflow设置为一个非visible的值

 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

触发红色盒子的BFC，可防止被绿色盒子遮挡

把注释的任意一条打开会触发.red的BFC，让两者处于不同的BFC

绿盒子设置浮动后，父盒子高度塌陷：

盒子触发BFC可以解决这个问题

在同一个BFC中时：

分为两个不同的BFC之后：