浮动之清除浮动

css 的浮动属性是大多新人绕不过的一个话题，浮动的一个重要特点是浮动元素会脱离当前文档流，以至于计算父元素高度时不会把其算进去，容易造成父元素高度塌陷。为了让父元素的高度计算正常，我们经常要手动清除浮动。

清除浮动的方式

  <div class="parent">
    <div class="child"></div>
  </div>

  .parent {
    background: skyblue;
  }

  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: deeppink;
  }

1. 在浮动元素的父元素下添加新的块级子标签（末尾）

  <div class="parent">
    <div class="child"></div>
    <div class="blank"></div>
  </div>

  .blank {
    clear: both;
  }

2. 原理和第一种一样，但是利用伪元素减少标签

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

3. 为父元素添加 oveflow：auto/hidden，原理是创造 BFC 标签，此时浮动元素会参与 BFC 元素的高度计算

  .parent {
    overflow: hidden;
  }

欢迎来前端学习打卡群一起学习～516913974