清除浮动的八种方法

浮动是什么？

浮动元素会脱离文档流进行左浮或者右浮，直到碰到父级元素或者其他的浮动元素。

为什么清除浮动：浮动会导致父元素高度坍塌，因为浮动脱离文档流，浮动以后不占文档流的位置，撑开的父元素高度肯定会坍塌。

清除浮动的八种方法：

1、父级div给出固定的高度。手动定义height，这样就解决了父级元素获取不到高度的问题。

优点：代码量少，简单容易掌握。

缺点：只适合高度固定的布局，如果高度和父级div不同会出现问题。

2、overflow，设置overflow：hidden。

优点：代码少，浏览器支持。

缺点：会把超出的部分隐藏起来，而且不能配合position使用

3、额外标签，添加一个新的标签，如div，或者br，并且设置标签的属性clear：both；清除浮动，让父级能自动获得高度。

优点：代码少，浏览器支持，不会各种问题。

缺点：会有很多空的div或者br。

4、使用单伪类after和zoom，使用方法：

.clearfloat:after{

　　　　　　  content:"";//设置内容为空

　　　　　  height:0;//高度为0

　　　　　　  line-height:0;//行高为0

　　　　　　  display:block;//将文本转为块级元素

　　　　　　  visibility:hidden;//将元素隐藏

　　　　　　  clear:both//清除浮动

　 }

　　　　  .clearfloat{

　　　　　　 zoom:1;为了兼容IE

　　   　}

优点：浏览器支持好，大型的浏览器都在使用，建议使用。

缺点：代码多，需要after和zoom都要使用才能兼容主流的浏览器。

5、双伪类清除浮动。使用方法：

　.clearfloat:before,.clearfloatafter {

                 content: "";

                 display: block;

                  clear: both;

             }

            .clearfloat {

                 zoom: 1;

           }

缺点：不严谨不建议使用

6、父级div跟着浮动，所有代码一起浮动就会形成一个整体，

缺点：会产生新的问题，不建议使用。

7、父级定义display：table；将div属性变成的表格。

缺点：产生新的问题，而且影响布局。

8、overflow：auto；需要设置width，不设置height，浏览器会自动检测浮动区的高度。

缺点：容易生成滚动条。