开启元素的BFC属性，以解决高度塌陷和外边距重叠问题

什么是高度塌陷

当父元素没有添加高度，父元素的高度需要被子元素撑开时，而子元素脱离文档流的时候（脱离文档流：子元素设置了浮动，子元素就会脱离文档流），此时父元素就会失去高度，这种情况就叫做高度塌陷。

比如这样：

<div class="box1">
  <div class="box2"></div>
</div>
.box1{
  width: 100%;
  border: solid red 6px;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: #bfa;
  float: left;
}

这样就会发生高度塌陷，如下

解决高度塌陷的方法就是开启元素的BFC，BFC属于元素的一个隐藏属性，不能使用代码直接开启，通常情况下是间接开启

BFC(块级格式化环境)

元素开启BFC的特点

1. 开启bfc的元素不会被浮动元素所覆盖
2. 开启bfc的元素 子元素和父元素外边距不重叠
3. 开启bfc的元素包含浮动的子元素

可以通过一些特殊方法开启元素的bfc：

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

解决浮动对布局所产生的影响

方案一：overflow:hidden 开启bfc

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

1. 原始样式

.box1{ 
  width: 100px;
  height: 100px;
  background-color: orange;
  /* float: left; */
}
.box2{ 
  width: 100px;
  height: 100px;
  background-color: #bfa;
  /* overflow: hidden; */
}

当box1开启浮动（解开上述代码块中 float: left; 的注释）之后 ，box1就会脱离文档流，绿色的 box2 就会浮动到上面去，橙色的box1就会覆盖绿色的box2，像这样

此时 我们需要开启box2的 overflow:hidden（解开上述代码块中overflow:hidden的注释）

给父元素添加伪元素以解决 外边距重叠的问题

解决子元素外边距与父元素外边距重叠

<div class="box1">
  <div class="box3"></div>
</div>
.box1 {
  width: 200px;
  height: 200px;
  background-color: orange;
  /* overflow: hidden; */
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: #bfa;
  margin-top: 100px;
}

如下图所示发生了外边距重叠，父元素会随着子元素的外边距向下移动

方案一：开启父元素 的 overflow: hidden

• 解决方案： 开启父元素 box1 的 overflow: hidden;（解开上述代码块的 overflow: hidden; 的注释），状态如下：

---

方案二 -给父元素 设置伪元素::afte 以解决外边距重叠

• 给父元素box1设置伪元素::after,但是伪元素属于行内元素所以要加上 display: block; 再添加clear：both；也就是说 直接将下面的代码块添加到样式中姐可以解决 外边距重叠问题。

.box1::after{
  /* 给 box1 设置一个伪元素
  但是 为元素是行内元素，所以要开启display：block；
  */
  content: '';
  clear: both;
  display: block;
}

---

解决高度塌陷问题

<div class="box1">
  <div class="box3"></div>
</div

    .box1 {
      width: 100%;
      border: solid 6px red;
      /* overflow: hidden; */
    }

    /* 使用给父元素添加伪元素的方法 解决高度塌陷问题 */
    /* .box1::after{ 
      content: '';
      display: block;
      clear: both;
    } */

    .box3 {
      width: 100px;
      height: 100px;
      background-color: #bfa;
      float: left;
    }

• 方案一：当 子元素浮动的时候，子元素脱离文档流，父元素就会失去高度，此时可以给父元素 box1开启 overflow: hidden;这样，父元素就会被子元素撑开
• 方案二：给父元素 设置一个 伪元素，让伪元素撑开高度添加如下代码，伪元素属于行内元素所以需要开启 display: block; 代码中 clear: both 的作用是清除上一个元素（这里就指 box3）浮动所产生的对页面结构的影响

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

开启BFC的完美方案 - clearfix 类 - 以解决高度塌陷和外边距重叠问题

body 代码

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

css代码

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}

.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}

此时 如图所示 父元素会随着子元素的外边距向下移动，因为发生了外边距重叠

外边距重叠的解决方法 ---- 添加 clearfix() 这个类

/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这个问题时，
直接使用clearfix 这个类即可 */
.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
  clear:both;
}

​