你可能疑惑过为什么创建BFC就能解决margin塌陷问题？
或者为什么解决兄弟塌陷就不能用overflow？
前者是创建了BFC这个独立的空间把子元素“关起来”了，建了一堵墙，让两个margin不能重叠
后者因为overflow创建的BFC不管子元素的margin，所以它们又叠在一起了
为什么呢
BFC是创建一个封闭的区域，它可以用来解决margin塌陷问题
范围包括了全部一整个的元素(包括了margin)
但BFC只管border内的东西，不管margin区域
那这样的话岂不是所有的BFC方法都不能使用，margin都会合并起来？
一、创建BFC的方法
1.设置浮动（float:left）
2.使用绝对定位（position:absolute）
3.使用display的值（inline-block（行内块），flex）
4.设置overflow
| 方法 | 副作用 | 原理 |
|---|---|---|
| float：left/right |
元素脱离文档流+ 变成块 |
“飘起来了” 不和兄弟接触 |
|
position： absolute | 元素脱离文档流 | 同上 |
|
display： inline-block(行内块) flex | 变成行内块 |
变成一行了， 只有垂直方向margin能塌陷 |
| overflow：hidden | 元素在普通流 |
还是块，兄弟会塌陷，父子不会塌陷 BFC会框住border内的，兄弟的margin会重叠 父子的margin内的被框住，子在父的BFC里，margin不会重叠 |
二、margin塌陷
两个块级元素设置上下margin时候会合并（只会出现在垂直方向）
计算规则
1.正负都取绝对值大的
2.一正一负就加起来
简单说：两个margin会重叠起来，自然取margin大那个作为两个元素的边距
负数怎么理解：两个越来越靠近然后相互叠起来，也是取大的
解决兄弟塌陷：
1.设置浮动
2.绝对定位
3.变成行内块
解决父子塌陷：
只要是变成BFC的方法都行
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
