css - 浮动
浮动布局 float
取值：left | right | none
设置给：块元素、行内元素、行内块元素
作用：利用float属性可设置元素的浮动，使元素可以在一行上显示。虽然浮动主要是应用于块元素，但行内元素其实也可以浮动，但行内元素本来就是一行显示，所以也没有这个必要
浮动布局的特点
1.一旦元素浮动，它就会脱离标准文档流。它会悬在它原来的位置上面，也即它原来占据的位置被腾空。
2.浮动元素对它前面的兄弟元素无任何影响，只对它后面的兄弟元素有影响。由于它已经脱离了正常文档流，它腾空的位置就会被其它正常元素占据。比如：两个尺寸相同的兄弟div，A在前，B在后，当A向左浮动后，B就会占据A的位置，但由于A悬浮在B上面，所以会看不到B。看起来就是两个盒子处在了同一个位置。但是如果它下面的元素是行内/行内块元素，则浮动的块元素会与它们并列显示，不会发生重叠
3.只有当元素全部浮动后才会并排显示，只要中间有未浮动的div挡路，由于未浮动的div是独占一行，这就会导致后面的浮动元素在下一行显示而非并排。比如：三个兄弟div，A向左浮动、B不浮动、C向左浮动，则AB会重叠、C显示在B原来的位置
4.一行上，某元素浮动后，原本与它基线对齐的元素会变成与它顶对齐，即便多个元素都浮动，同样也是顶线对齐
5浮动元素会受到父元素padding和自身margin的影响会在padding、margin处停止
6.元素一旦浮动就会变成行内块元素，具备行内块的特性。
7.由于子元素浮动后，它会脱离正常文档流，如果一个父元素里的子元素全部脱离的正常流，那么父元素如果没有明确设置一个≥子元素高度的height，则子元素会溢出。
清除浮动
浮动元素除了对父元素高度造成影响以外，它还会对它后面的元素造成影响。可以使用清除浮动来避免这种影响。有四种方法可清除浮动：
width: 500px;
background: black;
}
#son1 {
float: left;
width: 500px;
height: 50px;
background: #010056;
}
#footer {
height: 50px;
background: #ff6a00;
}
<div id="son1"></div>
</div>
<div id="footer"></div>
解决方法1.
设定父div的高≥后代元素的总高度，这样父元素后面的兄弟元素就不再受浮动的影响。
#father{
width:500px;
height:50px;
background:black;
}
父元素有了高度后，footer就可以正常显示在father的下面
解决方法2
设置父元素的overflow，取值hidden、scroll、auto，三个取值在此处的效果是一样的，它使父元素可以根据子元素的总高度自动撑开自身。这种方式与明确设置父元素高度是完全一样的。
#father{
width:500px;
overflow:hidden;
background:black;
}
比如常见的ul列表，一旦其li浮动，ul又没有明确设置≥li的高度，那么ul的高度会变成0。
解决方法3
在最后一个浮动元素的后面放一个空的盒子，设定其css的clear属性，取值有left、right、both。一旦使用了clear清除浮动影响后，父元素可以自动计算出它的高度去正确包裹住它的所有子元素。推荐使用这种方式清除浮动，好处在于它不但清除了son1对son2的影响，同时还使父元素有了高度。
<div id="son1"></div>
<div style="clear:left;"></div>
<div id="son2"></div>
</div>
<div id="footer"></div>
解决方法4
利用伪元素::after，这个伪元素是在父元素所包含的区域内的最后区域附加一个伪元素，用该伪元素清除浮动。
content: "";
display: block;
clear: both;
}
<div id="son1"></div>
::after被放在了此处
</div>
<div id="footer"></div>
解决方法5
在受浮动影响元素上设置overflow
overflow:hidden;
width:20px;
height: 20px;
background: green;
}
<div id="son1"></div>
<div id="son2"></div>
</div>
<div id="footer"></div>