子元素float，使得父元素不能自适应高度

<!-- syle部分 -->
  <style>
    .item {
      float: left;
      width: 100px;
      height: 200px;
      background-color: red;
    }
    .item1 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
<!-- html部分 -->
  <div class="box">
    <div class="item">Hello overflow float</div>
    <div class="item1">Hello overflow</div>
  </div>

父元素变窄

父元素的高度变窄：不能在包含浮动子元素的高度，而变窄了，变窄的部分也刚好是浮动元素的高度。

(1) 如何在让父元素重新的包含浮动部分的子元素高度呢？？？

方法： 给父元素添加 格式化上下文（BFC）。

(2) 那怎么添加BFC呢？？

最简单的方法：通过 overflow:hidden 属性

.box{
  overflow: hidden
}

父元素重新自适应

(3) 定位的影响
前提我们还是通过overflow:hidden 属性，来实现同一个BFC，来达到父元素子适应。

浮动元素相对定位的效果

总结

元素内部的元素因为浮动， 而产生了父元素变窄的情况，父元素不能自适应。
父元素通过创建BFC来重包含浮动元素，来达到自适应的效果，同时也清除了浮动！