浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是 float 和 clear属性。浮动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。拿出来干什么？一是可以实现传统出版物上那种文字绕排图片的效果，二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。

浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。

如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能放下第二段，也不想让它上来），怎么办？用 clear 属性来“清除”第二段，然后它就乖乖地呆在浮动元素下面了。

浮动

CSS 设计 float 属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性居然也成了创建多栏布局最简单的方式。

1.文本绕排图片

为了实现文本绕排图片的浮动效果，必须在标记中先写图片，然后再写环绕它的文本。

    
…the paragraph text…
CSS 规则如下。/*为简明起见，省略了字体声明*/p {margin:0; border:1px solid red;}/*外边距防止图片紧挨文本*/img {float:left; margin:0 4px 4px 0;}

以上规则会让图片浮动到左侧，从而让文本绕排到右侧

--浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。

2.创建分栏

围住浮动元素的三种方法

    
         
     
          
      
It's fun to float.
     
    
    section {border:1px solid blue; margin:0 0 10px 0;}/*删除默认的上下外边距*/p {margin 0;}/*为简明起见，省略了字体声明*/footer {border:1px solid red;}

--方法一：为父元素添加 overflow:hidden

--第一个方法很简单，缺点是不太直观，即为父元素应用 overflow:hidden，以强制它包围浮动元素。

--实际上， overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden 之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外， overflow:hidden 还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。

--方法二：同时浮动父元素

--第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来。

--方法三：添加非浮动的清除元素

--第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。

方法一

第一种方式不太理想，也就是简单地在 HTML 标记中添加一个子元素，并给它应用

clear 属性。由于没有默认的样式，不会引入多余空间， div 元素很适合这个目的。

    
         
     
          
      
It's fun to float.
      
     
    
    在此，我为 div 添加了一个类，以便于在 CSS 中添加它。section {border:1px solid blue;}img {float:left;}.clear_me {clear:left;}footer {border:1px solid red;}

方法二

再告诉你一个用 CSS 来添加这个清除元素的方法。首先，要给section 添加一个类。

    
         
     
          
      
It's fun to float.
      .clearfix:after {    content:".";    display:block;    height:0;    visibility:hidden;    clear:both;}
     
    

总结：要想强迫父元素包围其浮动的子元素有三种方式

1.为父元素应用 overflow:hidden

2.浮动父元素

3.在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元素添加 clearfix 类来加（当然，样式表中得需要相应的 clearfix 规则）

没有父元素时如何清除？

.clearfix:after {    content:".";    display:block;    height:0;    visibility:hidden;    clear:both;}像这样给每个段落都加上 clearfix 类：
    
         
     
          
      
       This text sits next to the image and because the…
       
    
       
            
        
         This text is short, so the next image can float up…
         
    
         
              
          
           Because the previous image's text does not…
           
.