清除浮动的多种方法

为什么要清除浮动？

为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.

设置一个大的div，里面装两个小的div ，一般情况是子级的div撑起父级div的高度，所以呈现以下的样子

如果说想要将里面两个小的div并排放的时候，则需要将两个div添加属性 float : left 结果是这样的

两个小的div并排了，但是父级的div的高度则没有了，这就是子级浮动造成的影响。

清除浮动的常用方法

①结尾处加空div标签 clear：both (不推荐使用：如果页面浮动布局多，就要增加很多空div，让人感觉很不好)

 <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="thr"></div>
    </div>

	.thr{
            clear: both ;
        }

原理：在浮动元素的后面添加一个空div兄弟元素，利用css提高的clear：both清除浮动，让父级div能自动获取到高度 。

②父级div定义 height（简单、代码少、容易掌握 ，但只适合高度固定的布局.）

	.box{
            width: 500px;
            border: 1px solid black;
            height: 500px;
        }

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题

③父级添加overflow方法（内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。）

	.box{
            width: 500px;
            border: 1px solid black;
            overflow: hidden;
        }

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度

④父级div定义 伪类：after 和 zoom

.box::after{
            content: "";
            display: block;
            visibility: hidden;
            height: 0;
            line-height: 0;
            clear: both;
            
            

        }
        .box{
            zoom: 1;
            border: 1px solid black;
            width: 500px;
        }

原理：IE8以上和非IE浏览器才支持：after，原理和清除浮动，让父级div能自动获取到高度相似 ，zoom(IE转有属性)可解决ie6，ie7浮动问题 ，推荐使用，建议定义公共类，以减少CSS代码。

⑤双伪元素法

.box::before,.box::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            zoom: 1;
            border: 1px solid black;
            width: 500px;
        }