浮动：float

　　浮动布局是布局结构中常使用的一种布局方式。

　　浮动分为左浮动和右浮动两种；当浮动元素遇到其他浮动元素的边框或者父元素的边框的时候停止浮动，浮动元素不会发生重叠；任何元素被浮动后它的元素类型将转换为一个块元素；最最重要的是被浮动的元素会脱离文档流，即不在网页中占据位置，这也就是子元素全部浮动导致父元素出现高度塌陷的原因；

　　那么。如何解决高度塌陷的问题呢？

　　第一种：简单直接的给定父元素一个固定的高，这样即便子元素浮动，父元素也不会受到影响。（不推荐使用，只适用于父元素高度固定的情况）。

　　第二种：overflow:hidden|auto;(overflow具有自动找高的作用，要特别注意的是这种情况下，父元素是不可以设置height属性的)。(不适用于有postion定位相关的样式)

　　第三种：空div法，在浮动元素的末尾添加一个空的div，并且设置其样式为 clear：both;利用这个属性的特性来重新赋予父元素高度。

　　第四种：伪元素法：通过父元素：after{content:'',display:block;clear:both}来添加一个空元素，原理和第三种一样。

　　　　注意:

　　　　　　在IE中6、7中不兼容这种写法，需要我们手动去设置对象的缩放比列。

　　　　　　在IE6、7的写法：

　　　　　　　　父元素{zoom:1;}；