【前端学习笔记】10-高度塌陷和外边距重叠原理及解决方案

BFC

概念

• BFC(block formatting context)块级格式化环境 ，BFC是一个css中的隐含属性，可以为一个元素开启BFC，开启后元素会变成一个独立的布局区域。

特点

• 开启bfc的元素不会被其他元素所覆盖
• 开启bfc的元素子元素和父元素外边距不会重叠
• 开启bfc元素可以包含浮动的子元素

开启bfc的方法

1.设置元素的浮动（不推荐）
2.将元素设置为行内块元素（不推荐）
3.将元素的overflow值设置成一个非visible的值（ 常用方式：为元素设置overfolow：hidden使其可以包含浮动元素 ）

高度塌陷

原因

高度塌陷的问题：在浮动布局中，父元素的高度默认是被子元素撑开的， 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离后将无法撑起父元素高度，造成父元素高度丢失； 父元素的高度丢失以后，其下的元素会上移，导致页面布局混乱（ 所以高度塌陷是浮动布局中常见问题且必须要处理）

解决方法

• 为父元素开启BFC：为父元素开启bfc后，在父容器为指定高度情况下，即使子元素浮动，父容器也不会高度塌陷，一般情况下使用overflow：hidden即可
• 使用after伪类解决高度塌陷： 如下box3盒子在box1盒子中，box3设置了浮动且未给box1指定高度，为了防止高度塌陷，则可在box3后写入空标签box2解决，那么父元素的高度就会撑起，无论子元素的高度多高，因为父元素始终得包裹住最后的空白内容，则可以无视子元素高度从而解决高度塌陷问题。但却凭空给HTML结构中加入了标签，所以选择通过css中after伪元素来解决

.box1::after{
content:‘’ ;
display: block;
clear: both;
}

<div class="box1">
    <div class="box3"></div>
    <!-- <div class="box2"></div> -->
</div>

 .box1{
            border: 1px solid red;
            background-color: #bfa;
          
            float: left;
        }
        /* 此处利用after伪类与在box3后加入空白div标签一样，
        	均是为了撑开父元素，解决box3浮动造成的高度塌陷，
            但实际上是从css的表现上解决，而非在html中结构上解决 */
        .box1::after{
            content:'' ;
            display: block;
            clear: both;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

外边距重叠

出现外边距重叠的情况

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
• 两个外边距一正一负时，折叠结果是两者的相加的和

如何解决外边距重叠

• 当需要设置未指定高度父容器相邻的子容器margin时就会发现，移动的是父容器位置，而非想要移动的子容器位置，这就是因为外边距重叠造成的。所以想要解决的思路就是使其不再相邻。
• 与解决塌陷时相似，这里选择使用伪元素before添加空白内容盒子来隔开两盒子

.box1::before{
content: ‘’;
display: table;
}

同时解决高度塌陷和外边距重叠

利用clearfix类名

• 给外部容器添加clearfix类名

 <div class="box1 clearfix">
        <div class="box2"></div>
 </div>

• 定义clearfix如下

 .clearfix::before,
 .clearfix::after{
            content: '';
            display: table;
            clear: both;
                 }