清楚浮动的方法总结（不断更新）

每一列浮动元素后，都要设置清除浮动

元素进行float操作后，会使元素浮出文档流，使其所在的父级元素无法跟随浮动元素的高度而改变自身高度。所带来的问题就是浮动元素超出了父级元素的包裹范围，若后面跟随有文字、或浮动元素，则会造成布局混乱。

高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

方法一：给浮动元素的父级设置高度，解决了父级div无法自动获取到高度的问题。（高度塌陷）

缺点：在浮动元素高度不确定的时候不适用

方法二：在最后一个浮动元素的后面加上<div style=”clear:both”></div>这是最简单有效的清除浮动的方法

<div class="father">

        <div class="float-tab">我是浮动元素1</div>

        <div class="float-tab">我是浮动元素2</div>

        <div class="float-tab">我是浮动元素3</div>

         <div class="float-tab">我是浮动元素4</div>

         <div class="float" style=”clear:both”></div>

         <div class="float-no" >我不是浮动元素</div>

</div>

方法三：给父级定义伪元素:after

方法三的原理和方法二有点类似，只有IE8以上和非IE浏览器才支持:after

IE浏览器需要用到zoom:1。

father:after{

                   clear:both;

                   content:"";

                   display:block;

                   visibility:hidden;

                   overflow：hidden;

}

注意：content里面的内容仍是属于父级元素的一部分，:after是添加在到父级元素的末尾，而不是后面

ps：这里简单说一下zoom:1属性

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

方法四：给父级容器定义overflow:hidden

注意：需要配合 宽度 或者 zoom 兼容IE6 IE7；

方法五：为父级容器也设置成浮动

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。