将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

从头到尾按照文档的顺序，该在什么位置就在什么位置。

通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片,浮动的红色块已经上天了，跟黄绿 两个块已经不再一个层面上了。

    红色向右浮动
    

        

        
        

        
        

        
    

                

通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片,浮动的红色块已经强上了绿色块。

    红色向左浮动
    

        

        
        

        
        

        
    

                

浮动的属性值有三个：float：none；float：left；float：right；

方法1：父级div定义 height

设置父元素高度

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

方法2：

使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p等块元素。

缺点：可以想象通过此方法，会添加多少无意义的空标签，在后期维护中比较麻烦。

方法3：对父元素设置overflow的样式，即overflow: auto/hidden;

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；

方法四：我也没接触过的方法:after（注意：作用于浮动元素的父亲）

它就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。 其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签， 而after利用其伪类clear:after在元素内部增加一个类似于div.clear的效果(clearfix用在父元素上面)。下面来看看其具体的使用方法： 使用clearfix

       
    
 
        
Left
 
        
Right
 
    
 
    
 
        div2
    
 
    
            

缺点：使用方式不当会造成代码量增加，初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。