浮动 清除浮动

理解浮动

     在CSS布局中分为内联元素(display:inline)和块状元素(display:block)，块状元素默认会占据一行，可设置高度宽度以及边距，而内敛元素不会也不能设置。常见的内敛元素有：a、span、input、select，常见的块状元素有：h1-h6，p,div，ul，table。
     浮动元素是设置float为非none值的元素，这时该元素会自动被设置成块元素，可以设置宽度、高度以及边距。浮动元素，顾名思义，使该元素浮动在其他元素之上，离开了原来的文档流，直到浮动到父元素的左右边距（上下边距不受限制）或者左、右方遇到其他设置了float的元素。而其附近设置的浮动元素会跟其边距相邻，表面上跟内联元素似的。而非浮动元素则相对复杂一些，分一下两种情况：浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在非浮动元素的部分显示。

浮动的特征

① 浮动的元素脱离标准文档流
② 浮动的元素相互贴靠
③ 浮动的元素具有“字围”现象
④ 浮动的元素会对后面的元素造成影响。

清除浮动的影响的方法

1. 给父盒子加上高度（项目中不常用） 因为我们的元素基本上是由内容撑起高度。不会给固定的高度。
2. 给后面的父盒子加上clear:both（浮动清除，但是父盒子的margin失效了：父盒子塌陷了） 会引起父盒子的margin失效，也不推荐使用
3. 外墙法（在浮动的两个父盒子之间加上一个div，这个div样式为clear:both） 这个时候，浮动清除了。margin也出现了。但是父盒子还是没有高度。
4. 内墙法（在浮动的父盒子最前面或者最后面加上一个div，这个div的样式为clear:both） 父盒子有了高度，但是页面中出现了很多无用的div
5. overflow:hidden（给第一个浮动的父盒子加上这个属性。也能清除浮动，本意是溢出盒子的部分隐藏起来）

这种方法，既能清除浮动，又让盒子有了高度，还不会出现莫名其妙的空盒子。所以，推荐使用！