深入剖析——float之个人见解

浮动的原本作用仅仅是为了实现文字的环绕效果。

以下分别是html与css代码，显示效果如下图。因为两个div使用了float浮动属性，所以脱离了标准文档流。让父元素撑开高度，我们需要清除浮动。

 

<div class="box">
        <div class="box-left">我是left-box</div>
        <div class="box-right">我是right-box</div>
    </div>

 

.box{
            width: 600px;
            margin:50px auto;
            border:1px solid #f00;
            padding:10px;  
            background: #000;
        }
        .box-left,.box-right{
            width: 200px;
            height: 150px;
            border:2px solid #fff;
            background: #999;
        }
        .box-left{
            float: left; 
        }
        .box-right{
            float: right;
        }

一共有两种方法——

1.在类为"box"的结束标签中加一个空div,并设置样式——<div style="clear:both"></div>

2.使用css伪类after——

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，这里我们使用属性 display 改变这一点。  

PS:所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

{*zoom:1}属于IE浏览器的专有属性。(支持IE6和IE7)

.clearfix必须定义在包含浮动子元素的父级元素上！！！！