css中的float（浮动）：
在css中浮动的作用可让元素脱离文档流，从而达到某种布局效果
- float：left，可以让元素向左浮动，元素会浮动到父元素的左边缘，由于脱离了文档流，所以处于正常文档流内的元素会后来居上，相应的浮动元素会盖在位于它之后，且和它处于同一父元素内的元素上面。
<pre>
<code><div class="container"></code>
<code><div class="elem-1"></div></code>
<code><div class="elem-2"></div></code>
<code><div class="elem-3"></div></code>
<code></div></code>
</pre><pre>// float 1
.container {
border: 3px solid blue;
padding: 10px;
}
.elem-1 {
width: 80px;
height: 80px;
background-color: green;
}
.elem-2 {
width: 100px;
height: 100px;
background-color: yellow;
}
.elem-3 {
width: 120px;
height: 120px;
background-color: red;
}
// float 2
.elem-1 {
width: 80px;
height: 80px;
float: left;
background-color: green;
}
</pre>
当我给elem-1加上float:left之后，elem-1脱离文档流，且浮动于elem-2之上
float-1 添加float之前.png
float-2 加上float之后.png
如果我给所有elem都加上float：left之后，它们都会脱离文档流，且会按照浮动方向依次排列，一个元素内部所有子元素都处于浮动状态时，父元素会出现塌陷的情况，也就是身体被掏空
<pre>// float 3
.elem-2 {
width: 100px;
height: 100px;
float: left;
background-color: yellow;
}
.elem-3 {
width: 120px;
height: 120px;
float: left;
background-color: red;
}
</pre>
float-3.png
但注意到元素float：left之后，虽然脱离文档流，但还是会浮动到content的边缘，并不会超出padding - 浮动的结果
元素的浮动会在页面布局的过程中很方便，但造成的影响有时也会让人很头疼，元素塌陷就是其中一个弊端。
由上面的例子可以看出，元素的浮动，会影响到其后相邻的元素（elem1浮动于elem2上，盖住了elem2的内容），同时浮动会造成的一个结果就是<u>产生一个BFC的context</u>, 这个我们之后在继续说明BFC是个什么鬼 - 清除浮动
为了处理由于用了浮动，一时开心而埋下的隐患，你就必须得知道清除浮动的一些方法。
常用的一些方法有
- 在其相邻元素上加上<code>clear:left/right/both;</code>这个css样式，
<pre>
<div class="container">
<code> ...</code>
<code> ...</code>
<code> ...</code>
<code> <div class="elem-4" style="clear:left"></div></code>
</div>
</pre>
这种清除浮动的方式很容易理解，浮动会给紧邻的元素造成布局影响，那我在它的紧邻元素上清除掉浮动就好了
float-4.png
所以这样，浮动造成的塌陷问题就被解决了，同时，内部的浮动元素还能享受到浮动带来的不一样的横向block排列方式，而不用你去设置<code>display: inline-block;</code>这个属性了，而且inline-block 的设置会有个小缺陷，并排的行内块级元素中间会有大约4px的间距，所以通常又需要<code>margin-right: -4px;</code>来解决这一问题，并不是特别方便，而浮动能帮你轻易的实现这种布局效果 - 在浮动元素的父元素上添加伪元素清除浮动
<pre>
.container:after {
content: '';
display: table;
clear: both;
}
</pre>
这种方法相比较上一种添加一个没太大意义的html元素来说更合理一些，它采用给父元素加伪类的方法来清除子元素浮动带来的布局影响，同样能够达到图float-4的效果，这里需要注意的有两点，1⃣️ content，是伪元素中必须的一个属性，但你可以设一个空值。2⃣️ display的设置，display可以设置成block也可以设制成table，都会有清除浮动的效果，但通常情况下都会设置table，因为相比block，table不容易影响其他页面元素的布局。
上述两种方法都是比较常规的利用clear属性来清除浮动的不同做法，但清除浮动还有的一种做法是构造一个BFC（Block Formatting Context）容器，听起来似乎会比较麻烦，好像很难的样子，但实际并非如此，在下一节会给大家做BFC的介绍，以及用它清除浮动的办法。
