子元素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来重包含浮动元素，来达到自适应的效果，同时也清除了浮动！
