CSS笔记 ( 八 ) margin 塌陷和边距重叠解决方案 (BFC)

---

博主的 Github 地址

---

 
 
 

1. 什么是 BFC 和什么是 margin 塌陷?

BFC 的含义

BFC 的全称是 Block Formatting Context, 意为块级格式化上下文

BFC 的用处

通过 BFC 来解决 margin 塌陷的问题

margin 塌陷产生的原因

两个或多个块级元素的盒子的垂直外边距会重合, 最终垂直外边距会变成两者中最大的那个.
如果出现负边距, 则在最大的正边距中减去绝对值最大的负边距.
如果没有正边距, 则从零中减去绝对值最大的负边距.

注意: 是垂直外边距会重合, 水平外边距永远不会发生塌陷
 
 

示例 1: 上下两个相邻 div 的垂直外边距重合的情况

代码示例

    <div style="background-color: black; height: 50px;"></div>
    <div id="margintest01" style="width: 200px; height: 200px; background-color: #ff0000; margin: 50px; border: 1px solid black;"></div>
    <div id="margintest02" style="width: 100px; height: 100px; background-color: aqua; margin: 100px; border: 1px solid black;"></div>
    <div style="background-color: black; height: 50px;"></div>

实际图展示:

1. 蓝色方块的 margin 设置为 100 像素, 红色方块的 margin 设置为 50 像素
   从这里就可以看出红色方块的 margin 并没有叠加蓝色方块的 margin,
   两者间距离只有 100 像素, 并非叠加后的 150 像素
   

2. 红色方块的 margin 为 50 像素, 这里也能看出红色方块的 margin 陷入到了蓝色方块的 margin 中去
   

3. 显而易见, 红蓝方块之间的 margin 出现了重合,
   并且最后只保留了蓝色方块的 margin,
   即两者之间值最大的 margin, 蓝方块为 100 像素, 红方块为 50 像素,
   因此红色方块的 margin 全部陷入蓝色方块的 margin 之中

 
 

示例 2: 嵌套关系的两个 div 的垂直外边距重合的情况

注意: div 无边框才能触发 margin 塌陷, 否则子容器会正常的以父容器顶部边界为参照, 向下移动

css代码示例

    <style>
        body {
            background-color: gray;
        }
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
    </style>

HTML代码示例

    <div style="background-color: black; height: 50px;"></div>
    <div class="father">
        <div class="child"></div>
    </div>
    <div style="background-color: black; height: 50px;"></div>

1. 红蓝方块都没有外边距的原图效果
   
2. 现在给蓝方块的 CSS 样式加上一行 margin-top: 50px; 之后, 展示的效果
3. 显而易见, 红蓝方块之间的 margin 也出现了重合, 并且最后选择了最大值
   即两者之间值最大的 margin, 蓝方块为 50 像素, 红方块为 0 像素,
   因此红色方块也被蓝色方块的 margin 所一起顶了下去 50 像素的距离

 
 
 

2. 使用和触发 BFC 机制

触发 BFC 一共有 4 种方式

1. 浮动元素, float 属性设置除 none 以外的值;
2. 定位元素, position 属性设置绝对定位 absolute 或固定定位 fixed;
3. display 属性设置为其中之一的值 inline-block, table-cell, table-caption;
4. overflow 属性除 visible 以外的值, 即 hidden，auto，scroll;

 
 

BFC 的特性

1. 内部的 Box 会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由 margin 决定
3. bfc 的区域不会与 float 的元素区域重叠
4. 计算 bfc 的高度时, 浮动元素也参与计算
5. bfc 就是页面上的一个独立容器, 容器里面的子元素不会影响外面元素

解决方案示例1: 修改 position 或 display 属性进行解决

css代码示例

        .child {
            width: 50px;
            height: 50px;
            background-color: aqua;
            margin-top: 50px;
            /*position: absolute;*//*第一种: 修改 position 属性*/
            /*display: inline-block;*//*第二种: 修改 display 属性*/
        }

展示效果

• 两种方式的效果都是一样的
  

解决方案示例2: 修改 float 属性进行解决

• 浮动元素在下一篇会详细介绍

 
css代码示例

        .child {
            width: 50px;
            height: 50px;
            background-color: aqua;
            margin-top: 50px;
            float: right;/*在父元素内向右浮动*/
        }

展示效果

• 浮动向右
  

解决方案示例3: 修改 overflow 属性进行解决

• overflow 是溢出部分隐藏, 下下篇会详细介绍

 
css代码示例

• 注: 这里修改的是父元素的 CSS

        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: hidden;
        }

展示效果

 
 
 

3. 要注意的细节

凡是设置了 position: absolute 和 float: left/right 后,
系统会自动将被设置的元素变为inline-block元素, 即行级块元素