Margin 塌陷问题如何解决？触发BFC。BFC的概念和触发条件

1️⃣ 什么是 Margin 塌陷

【现象】

　　两个垂直方向相邻的块级盒子(兄弟或父子)之间的margin 会合并为其中的最大值，而不是两者相加。
【影响】

　　兄弟元素：上下margin合并为其中的最大值
　　父子元素：如果父元素没有padding 或 border，子元素的 margin-top会 透过 父元素与父元素的 margin-top合并

2️⃣ BFC（Block Formatting Context）是什么

【定义】

　　1、BFC 是一个独立渲染区域，创建BFC的元素 内部的布局规则与外部隔离

　　2、内部元素的margin 不会与 BFC外部 的 margin发生塌陷

　　3、BFC区域不会与浮动元素重叠，会包裹内部浮动

　　4、BFC的计算高度包含浮动子元素

 

3️⃣ 如何触发 BFC

触发属性	示例
overflow 非 visible	overflow:hidden / auto / scroll
display 特殊值	display: flow-root（推荐现代方案）、inline-block、table-cell
浮动	float: left/right
定位	position: absolute / fixed
弹性/网格布局	display: flex / grid

 

4️⃣ 常见解决 Margin 塌陷的方法

方法	代码示例	原理
父元素创建 BFC	overflow:hidden; / display: flow-root;	BFC 内外 margin 不会塌陷
父元素加 padding 或 border	padding-top:1px; / border-top:1px solid transparent;	子元素的 margin-top 不会透过 padding/border
浮动父元素	float:left;	浮动元素自动形成 BFC
flex/grid 布局	display:flex;	Flex 容器是 BFC
伪元素清除	::before { content:""; display:table; }	display:table 也创建 BFC

 

5️⃣ BFC 除了解决 margin 塌陷还有什么作用？

　　1、包含内部浮动元素(清除浮动)

　　2、阻止文字环绕浮动

　　3、隔离外部布局，防止浮动\外边距影响