BFC（块级格式化上下文）是网页布局中的重要概念，它创建了一个独立的渲染区域，使得内部元素的样式不会影响到外部。通过设置overflow属性为auto、scroll或hidden，可以触发BFC特性，以此来清除浮动元素对父元素高度计算的影响，防止父元素塌陷。此外，BFC还能解决margin穿透问题，避免元素间的margin重叠。理解和利用BFC能有效提升CSS布局的可控性。
- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，
并且与这个区域外部毫不相干。内部元素除了脱离文档流，之外无论如何设置都不会影响父
级。（如同杯中水，如何改变也不会撒出）
-计算 BFC 的高度时，浮动元素也参与计算。所以形成 BFC 的元素可以清除浮动带来的影
响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就
违背了 BFC 的初衷，所以要清除浮动带来的影响。-
scroll、auto、hidden 这三个可以触
发元素的 BFC 特性。visible 不会。
- 利用 overflow 形成 BFC 的应用：
- 清除浮动影响：父元素设置 overflow：auto/scroll/hidden；可以清除子元素浮动带
来的影响。（形成 bfc 结界，与外界隔绝，仅支持 ie7+及现代浏览器）
- 避免 margin 穿透/重叠问题（形成 bfc 结界，与外界隔绝）
（*直译：因官方未给出中文注释，故称为直译）
BFC：自成一个空间，保护自己和子元素不受影响
（个人日常学习记录）
扫一扫
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
