css 浮动

1.什么是浮动

• 会使元素向左或者向右浮动，只能左右，不能上下
• 浮动元素碰到包含框或另一个浮动框，浮动停止
• 浮动元素之后的元素将围绕他，之前的元素不受影响
• 浮动会脱离标准文档流

2.浮动会出现的问题

高度塌陷，浮动溢出

• 使用浮动后，脱离文档流，原先的高度不在了。我们需要回到文档流

3.清除浮动的方法

• 在浮动元素后用一个空元素,再设置清楚浮动的方法

    <div class="clear"></div>
    .clear{
        clear: both;
    }

• 给浮动元素容器添加overflow:hidden
• 使用css3的:after清楚伪元素(最常用)

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both
    }
    .clearfix {
        *zoom: 1 /*出发hasLayout兼容IE6，IE7*/
    }