块级格式化上下文（BFC）详解_块级格式化上下文有继承属性嘛-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37566921/article/details/131679647

BFC是CSS布局中的一种规则，确保内部元素垂直排列并处理margin重叠。创建BFC的方法包括设置浮动、绝对定位、特定display属性或overflow。BFC区域不与浮动元素交叉，且在计算高度时包含浮动元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Block Formatting Content，即块级格式化上下文

BFC所具有的特性：

在bfc中，内部的盒子会在垂直方向，一个接一个的排列；
在bfc中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；
盒子垂直方向的距离由margin决定，属于同一个bfc的两个相邻盒子的margin会发生重叠；
bfc的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

怎么取创建BFC

float属性不为none（脱离文档流）
position为absolute或fixed
display为flow-root，inline-block，table-cell，table-caption，flex,inine-flex
overflow不为visible
根元素

display: content;

display：contents 使 div 不产生任何框，因此不会渲染其背景边框和内边距，但颜色 / 字体等继承的属性还是会对其子元素产生效果；

即在盒子上添加 display : contents , 当前盒子若设置了 background border padding width height 等属性会失效；