CSS浮动----Float
一.浮动的意义
不论是块元素、行内元素，设置了浮动后，元素会变得跟行内块 inline-block 元素极其相似，我们便可以在一行放置多个盒子。
而盒子浮动以后，根据其字面意思，我们可以知道其脱离了标准流，不再占有空间，后续元素会因为浮动元素的脱离发生一系列变化，即填充浮动元素的位置。
浮动作为CSS布局的三大机制：标准流、浮动和定位之一，需要完全掌握。
二.浮动的作用
多个行内盒子需要放置到一行时，盒子间会出现空白缝隙的问题，解决办法之一就是使用浮动。
三.浮动的用法
向元素添加CSS属性 float：none（默认无浮动）| left（左浮动）| right（右浮动）。
四.注意事项
1.当浮动元素有父元素时，以左对齐为例，该元素自动对齐父元素左上角，但不会与父元素边框重叠或者超过父元素的内边距。
2.当浮动元素有兄弟元素时：
（1）如果上一个兄弟元素未设置浮动，则该元素会在下一行开始浮动；
（2）如果下一个兄弟元素未设置浮动，则该兄弟元素会填充到浮动元素的位置，而浮动元素则置于其上方。
3.浮动元素只会影响之后的标准流元素，并不会影响之前的标准流元素。
4.通常我们建议，只要有元素浮动，其兄弟元素也应该浮动。
五.清除浮动
清除浮动其实是指清除浮动带来的不好影响，什么是不好的影响呢？
注意前面提到的，设置了浮动后，元素不再占有空间，如果该元素的父元素是个没有高度的盒子，此时父元素的兄弟元素则会填充到父元素的正下方。
清除浮动带来的这个不好影响的办法有这几种：
（1）在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>，或其他空标签，这会破坏文档结构；
（2）可以给父级添加： overflow：hidden| auto| scroll ，内容过多不会自动换行，无法显示需要溢出的内容；
（3）使用伪元素 ::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }，不用单独加标签破坏结构，但IE6-7不支持伪元素。