CSS BFC详解

2023-12-14 22:52:52

概念

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,可以更好地控制页面布局和渲染效果。

文章来源:https://blog.csdn.net/csdn9_14/article/details/135005426
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。