清除浮动的方法

浮动在页面布局是经常会用到，但是浮动后不做任何清除浮动的处理会带来一系列问题，这里我总结了一些清除浮动的方法

一、给浮动元素的祖先元素设置高度

只要在一个有高度的盒子中浮动，那么这个浮动就不会影响后面的浮动元素，也就清除了浮动带来的影响

例：

<div class="div1">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div>
    <ul>
        <li>学习方法</li>
        <li>实战经验</li>
        <li>面试技巧</li>
    </ul>
</div>

这里两个div都没有设置高度，让第一个div中的li左浮动，第二个div中的li会自动去紧贴第一个div中的li，效果如下：

但是给第一个div加上高度后，就解决了这个问题，效果如下：

二、给后一个盒子加上clear:both；

网页制作中，高度很少出现，而且比较麻烦，浮动元素后面的盒子加上clear:both;意思就是清除别人对我的影响，但是这个方法有个致命的缺陷就是：margin会失效，两个盒子之间没有任何间隙了。

三、隔墙法

就是在两个盒子之间增加一个有高度的盒子（外墙法）或者在第一个有浮动元素的盒子中增加一个有高度的盒子（内墙法），达到类似一道墙的作用
例：外墙法

HTML:

<div class="div1">
   <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div class="cl div2"></div>
<div>
    <ul>
        <li>学习方法</li>
        <li>实战经验</li>
        <li>面试技巧</li>
    </ul>
</div>

CSS:

.div2 {
            height: 50px;
        }
.cl {
            clear: both;
        }
li {
            float: left;
        }

例：内墙法
HTML:

<div class="div1">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
    <div class="cl div2"></div>
</div>

外墙法有个问题就是第一div还是没有高度，如果想要第一个div根据自己的儿子自动撑出高度，建议使用内墙法

四、使用伪元素和 zoom 清除浮动（zoom(IE转有属性)可解决ie6,ie7浮动问题 ）

例：
HTML:

<div class="clearfix">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div>
    <ul>
        <li>学习方法</li>
        <li>实战经验</li>
        <li>面试技巧</li>
    </ul>
</div>

CSS:

.clearfix:after {
            content: '';
            height:0;
            line-height:0;
            display: block;
            visibility: hidden;
            clear: both;
        }
.clearfix {
            zoom:1;
        }
li {
            float: left;
        }

或使用双伪元素清除浮动

.clearfix  {
                  content: "";
                  display: block;
                  clear: both;
            }
.clearfix {
                  zoom: 1;
            }

五、overflow：hidden

一个父盒子不能被自己浮动的儿子撑出高度，但是给父亲加上overflow:hidden,那么这个父盒子就能够被浮动的儿子撑出高度了
例：
HTML:

<div class="div1">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div>
    <ul>
        <li>学习方法</li>
        <li>实战经验</li>
        <li>面试技巧</li>
    </ul>
</div>

  CSS:

.div1 {
            overflow:hidden;
        }