CSS BFC详解

概念

BFC（Block Formatting Context）是CSS中的一个概念，用于描述一个独立的渲染区域，其中的元素按照一定规则进行布局和渲染。

BFC具有以下特性和作用

清除浮动：当一个元素的float属性设置为left或right时，会创建一个BFC，使得该元素不会被浮动元素覆盖。

阻止垂直外边距重叠：在同一个BFC中，相邻的两个块级元素的垂直外边距会发生重叠。但是在不同的BFC中，垂直外边距不会重叠。

自适应两栏布局：通过创建两个相邻的块级元素，并将其中一个设置为浮动或者使用绝对定位，可以实现自适应两栏布局。

防止文字环绕：当一个元素设置为浮动时，它会创建一个BFC，并且其他内容不会环绕在该浮动元素周围。

防止父元素高度塌陷：当父元素包含了浮动或者绝对定位的子元素时，如果没有清除浮动或者创建BFC，父元素的高度将塌陷为0。

创建BFC的条件

• 根元素（）或包含根元素的元素。

• 浮动元素（float属性不为none）。

• 绝对定位元素（position为absolute或fixed）。

• 行内块元素（display为inline-block）。

• 表格单元格（display为table-cell，HTML表格单元格默认会创建BFC）。

• overflow属性的值不为visible的块级元素。

BFC的布局规则

• BFC中的块级盒子会垂直排列，从上到下。

• 相邻的块级盒子的垂直外边距会发生重叠，但是在不同的BFC中不会发生重叠。

• BFC中的浮动盒子会参与计算高度，使得父元素能够包含浮动盒子。

• BFC中的块级盒子在水平方向上不会溢出其包含块，而是会自动缩小宽度以适应包含块。

总结

BFC是一种布局上下文，可以解决一些常见的布局问题，并且具有一些特性和作用。通过合理地创建和利用BFC，可以更好地控制页面布局和渲染效果。