父元素不能自适应宽高

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

  

  

    
Hello overflow float
    
Hello overflow
  

父元素变窄

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

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

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

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

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

.box{
  overflow: hidden
}

父元素重新自适应

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

浮动元素相对定位的效果

总结

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