CSS定位元素--浮动与清除
浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是 float 和 clear属性。浮动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。拿出来干什么？一是可以实现传统出版物上那种文字绕排图片的效果，二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。
浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。
如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能放下第二段，也不想让它上来），怎么办？用 clear 属性来“清除”第二段，然后它就乖乖地呆在浮动元素下面了。
浮动
CSS 设计 float 属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性居然也成了创建多栏布局最简单的方式。
1.文本绕排图片
为了实现文本绕排图片的浮动效果，必须在标记中先写图片，然后再写环绕它的文本。
<img …… />
<p>…the paragraph text…</p>
CSS 规则如下。
/*为简明起见，省略了字体声明*/
p {margin:0; border:1px solid red;}
/*外边距防止图片紧挨文本*/
img {float:left; margin:0 4px 4px 0;}
以上规则会让图片浮动到左侧，从而让文本绕排到右侧
--浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。
2.创建分栏
围住浮动元素的三种方法
<section>
<img src="images/rubber_duck2.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>
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 元素很适合这个目的。
<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>
在此，我为 div 添加了一个类，以便于在 CSS 中添加它。
section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}
方法二
再告诉你一个用 CSS 来添加这个清除元素的方法。首先，要给section 添加一个类。
<section class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>
.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 类：
<section>
<img src="images/rubber_duck3.jpg">
<p class="clearfix">This text sits next to the image and because the…</p>
<img src="images/beach_ball.jpg">
<p class="clearfix">This text is short, so the next image can float up…</p>
<img src="images/yellow_float.jpg">
<p class="clearfix">Because the previous image's text does not…</p>.
</section>