1.加高法

浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

<div>   → 设置height
    <p></p>
    <p></p>
    <p></p>
</div>

<div>   → 设置height
    <p></p>
    <p></p>
    <p></p>
</div>

2.clear:both法

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div>   → clear:both;
    <p></p>
    <p></p>
    <p></p>
</div>

浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

3.隔墙法

在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div class="cl h10"></div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。

4.内墙法

<div>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl h10"></div>
</div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

5.overflow:hidden

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。

<div> ---->设置overflow:hidden属性
    <p></p>
    <p></p>
    <p></p>
</div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>