其实浮动这个属性，我已经很久没用了，最近项目不紧急，稍微研究了下，一般情况下，我们清除浮动用到的属性主要有
1.设置父元素的overflow:hidden
2.使用dom标签或者伪元素定义clear来清除浮动
本文我们主要讲第一条
1.具体场景
我们先来看看在一个dom中定义一个子dom，这个子dom没有设置浮动
.parent {
margin: 200px;
width: 500px;
background: red;
}
.child {
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
}
parent只设置了宽度，高度是自适应，看看效果
image.png
1.1 结论，正常情况下，父元素的高度会被子元素自动撑开
此时，如果把代码改一下，设置子元素为浮动，再看看效果
.parent {
margin: 200px;
width: 500px;
background: red;
}
.child {
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
float: left;
}
image.png
1.2 结论，当使用float时，父元素不随子元素的高度撑开，子元素脱离文档流，浮动的元素的高度不计算到父元素内
此时我们再给父元素定义一个正常的子对象，看看效果
.parent {
margin: 200px;
width: 500px;
background: red;
}
.child {
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
float: left;
}
.normalChild{
width: 130px;
height: 120px;
background: green;
}
<div class="parent">
<div class="child"></div>
<div class="normalChild"></div>
</div>
image.png
1.3 结论，浮动元素盖住了正常的元素
如果我们给normalChild设置一个overflow：hidden，会如何
image.png
1.4 结论，此时，不被挡住了
再回到一开始，我们给父元素设置overflow，看看会如何
.parent {
margin: 200px;
width: 500px;
overflow:hidden;
background: red;
}
.child {
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
float: left;
}
image.png
1.5 结论，此时，能自动撑开了
再定义一个场景，加一个父元素的兄弟节点，先来看看不浮动的效果
.parent {
margin: 200px auto 0;
width: 500px;
background: red;
}
.child {
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
}
.slibing{
margin: 0 auto;
width:500px;
height: 100px;
background: rgba(110,110,0, .3);
}
image.png
1.6 结论，当没有浮动的元素时，块级元素由上到下排列
修改代码，给child元素添加浮动
.parent {
margin: 200px auto 0;
width: 500px;
background: red;
}
.child {
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
float: left;
}
.slibing{
margin: 0 auto;
width:500px;
height: 100px;
background: rgba(110,110,0, .3);
}
image.png
1.7 结论，父级节点中有浮动元素时，不会撑开父级节点，并且父级节点的兄弟节点的布局为因此受到影响
在上面的基础上，给父节点加一个overflow:hidden，再看看效果
image.png
1.8 结论，给父节点添加overflow:hidden,消除了浮动元素的影响
2.why
由上面的场景我们可以看出，使用了overflow之后，可以让float的元素能撑开父元素，能让元素不被浮动的元素覆盖，等等等等一堆
为什么设置父元素为overflow:hidden就实现了清除浮动的功能呢？这里要引出一个概念bfc(block formatting context)
2.1 BFC仅仅是一个概念，可以通过多种手段将一个元素变为BFC元素
- float的值不为none；
- overflow的值不为visible；
- position的值为fixed / absolute；
- display的值为table-cell / table-caption / inline-block / flex / inline-flex
上面场景中，都是用overflow来进行变换的
2.2 BFC元素排版遵循以下几条规则
- 内部的块级元素会在垂直方向，一个接一个地放置；
- 块级元素垂直方向的距离由margin决定。
- 属于同一个BFC的两个相邻的块级元素会发生，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
- 每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
- BFC的区域不会与float box重叠；*
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
- 计算BFC的高度时，浮动元素也参与计算
结合以上几点，我们大概就能明白为什么使用overflow：hidden能清除浮动了吧
