【css】外边距重叠及解决办法BFC

什么时候会遇到

1. 当父元素没有文本内容，子标签为块级元素并设置margin-top，子元素的margin-top效果转移到了父元素上，这种现象就是外边距塌陷（如图1）。

图1-子外边距塌陷

2. 当父子元素都为块级元素并设置margin-top时，父标签和子标签外边距重叠，取最大的值，如果子margin-top值大于父margin-top值就会取更大的值，这就是外边距合并的一种情况（如图2）。

图2-外边距合并

根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。

3. 当兄弟元素都为块级元素并设置垂直方向外边距（margin-top/bottom）时，外边距会合并，这就是外边距合并的一种情况（如图3）。
   外边距合并取值规则如下：
   （1）外边距如果都为正数，那么取更大的值。
   （2）外边距如果都为负数，那么取绝对值较大的值。
   （3）外边距如果一个为正， 一个为负 那么会叠加。

图3-外边距合并

解决方法

1. 为父级块设置 overflow 值不为 visible 或 clip 的块级元素，为 auto、scroll、hidden

2. 为父元素设置成border-box,增加padding属性来为子元素定位

   box-sizing: border-box;
   padding-top: 20px;
   

3. 给父元素加上border属性

   border:1px solid red;
   

4. 给父元素或本身增加浮动float

   float: left;
   

5. 给父元素或本元素增加绝对定位absolute

   position: absolute;
   

6. 给父元素或本身加上固定定位fixed

   position: fixed;
   

7. 给父元素或本身加上display:inline-block;

   display:inline-block;
   

BFC

BFC(Block Formatting Context)格式化上下文，作用于块级元素是一个独立渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

1. 创建BFC
   （1）根元素（html）
   （2）在父级块中使用 display: flow-root ，行为如同 root（在浏览器中是 html）元素
   （3）定位元素：position 值为 absolute/fixed
   （4）行内块元素：display 值为 inline-block、flex、inline-flex、grid、inline-grid、table、inline-table
   （5）表格元素：父元素display 为 table，子设置表格元素 table-cell、table-caption、table-row、table-row-group、table-header-group、table-footer-group
   （6）浮动元素：float 值为 left、right
   （7）在父级块中设置 overflow 值不为 visible 或 clip 的块级元素，为 auto、scroll、hidden
   （8）多列容器：column-count 或 column-width (en-US) 值不为 auto，且含有 column-count: 1 的元素
   （9）column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中
   （10）contain 值为 layout、content 或 paint
2. BFC规范/特性
   （1）BFC 是独立容器，内部标签不会影响到外部标签
   （2）属于同一个 BFC 的两个相邻块元素垂直排列，外边距会发生重叠
   （3）BFC 的子元素的margin-left与其包含块的border-left相接触
   （4）BFC 的区域不会与 float 的元素区域重叠
   （5）计算 BFC 的高度时，浮动子元素也参与计算
   （6）文字层不会被浮动层覆盖，环绕于周围
3. BFC应用场景：
   （1）解决外边距重叠
   （2）自适应两栏布局（期待后续布局文章有介绍）
   （3）清除浮动

复习学习链接：
HTML知识架构
CSS知识框架