CSS盒子塌陷常用解决方案

盒子塌陷原因：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时的子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

 <div class="father">
  <div class="child"></div>
</div>
<style>
  .father {
    width: 200px;
    background-color: pink;
    overflow: hidden;
  }
  .child {
    width: 100px;
    height: 80px;
    background-color: orange;
    float: left;
  }
</style>

上述代码是因为父元素没有设置高度，子元素设置浮动导致父元素发生塌陷

方法一：利用overflow属性

overflow 不为 visible 元素会变成BFC元素，而 BFC 元素的高度计算会将浮动元素的高度包括在内

    <div class="father">
      <div class="child"></div>
    </div>
    <style>
      .father {
        width: 200px;
        background-color: pink;
        overflow: hidden;
      }
      .child {
        width: 100px;
        height: 80px;
        background-color: orange;
        float: left;
      }
    </style>

上述图片是改变overflow属性值后的结果图，但使用overflow解除盒子塌陷也存在缺陷

• 某些情况下overflow:auto会出现滚动条
• 某些情况下overflow:hidden会隐藏部分内容

方法二：为父元素添加after伪元素选择器

css的伪类与伪元素选择器介绍见我的另一篇博文CSS之伪类选择器与伪元素选择器

    <div class="father">
      <div class="child"></div>
    </div>
    <style>
      .father {
        width: 200px;
        background-color: pink;
      }
      .child {
        width: 100px;
        height: 80px;
        background-color: orange;
        float: left;
      }
      .father::after {
        content: "";
        clear: both;
        display: block;
        zoom: 1;
      }
    </style>

为父元素添加：after选择器就是在相当于在父元素的尾部追加了一块内容，将添加的这块内容置空（content：“”）并设置clear:both就起到了在不增加任何元素的同时取消浮动的作用

下面详细介绍一下clear:both

• 作用是清除CSS中产生的浮动。当我们为子元素设置了浮动但又不希望父元素识别到这个浮动时，我们就需要手动清除浮动，而clear样式属性的作用就是这个。
• ：after选择器添加的内容是在父元素的尾部，实际上它还是在父元素的内部，所以：after选择器的作用域也是父元素，它设置了clear:both就是清楚父元素内的各种浮动，好让父元素识别不到浮动