浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是float和clear属性。
浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是float和clear属性。浮
动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。拿出来干什么？一是
可以实现传统出版物上那种文字绕排图片的效果，二是可以让原来上下堆叠的块级元素，
变成左右并列，从而实现布局中的分栏。
浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提
升到与浮动元素平起平坐。
浮动的第一个例子：
- 文本绕排图片
为了实现文本绕排图片的浮动效果，必须在标记中先写图片，然后再写环绕它的文本。
<img …… />
<p>…the paragraph text…</p>
CSS规则如下：
/为简明起见，省略了字体声明/
p {margin:0; border:1px solid red;}
/外边距防止图片紧挨文本/
img {float:left; margin:0 4px 4px 0;}
以上规则会让图片浮动到左侧，从而让文本绕排到右侧。如下图所示：
image.png
图3-16 浮动图片会从文档流中被移除，如果在标记中有文本元素跟在它后面，则其中
的文本会绕开图片
说得形象一点，在你浮动一张图片或者其他元素时，你是在要求浏览器把它往上方推，直
到它碰到父元素（也就是body元素）的内边界。后面的段落（带灰色边框）不再认为浮动
元素在文档流中位于它的前面了，因而它会占据父元素左上角的位置。不过，它的内容
（文本）会绕开浮动的图片。
*************************************************************************************************************************************A*
浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身
有默认的宽度。 - 创建分栏
在此基础上创建多栏，只要再用一次float属性，就这么简单。如图3-17所示，只要给段落
设定宽度，然后也浮动它即可。
p {float:left; margin:0; width:200px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
image.png
你这样同时浮动图片和“有宽度的”段落，会导致段落的文本绕排效果消失，而浮动的段落
也会尽可能向左向上移动。就这样，这个段落就构成了紧挨着图片的一栏。这就是使
用float属性创建多栏布局的原理。换句话说，如果几个相邻的元素都具有设定的宽度，都
是浮动的，而且水平空间也足以容纳它们，它们就会并列排在一行。
如果你创建了三个浮动、固定宽度的元素，它们就会像这样并排在一行，构成三栏布局的
框架。每个元素都可以作为容器，包含其他元素。
3.围住浮动元素的三种方法
浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。这种情况有时候并
非我们想要的，本节向大家传授三种围住浮动子元素的方法。记住，这三种方法你都得掌
握，这样才能审时度势，选择最合适的一种。
为了演示浮动元素的行为，这种行为对布局会产生什么影响，以及解决这个问题的三种方
法，我们首先要从一张带标题的图片开始。图片和标签包含在一个section元素中，
而section元素后面跟着一个footer元素。可以把这个footer元素想象成很多网页底部都
会有的与页面同宽的页脚。
<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;}
效果如下图：
image.png
现在我们看到的是常规文档流，即块级元素包围着所有子元素，而且在页面中自上而下相
互堆叠在一起。假设我们想让图片标题位于图片右侧，而不是像现在这样位于下方。运用
刚刚学到的知识，我们知道实现这个目标最简单的方式就是浮动图片。
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
修改之后效果如下图：
image.png
浮动图片后标题跑到了右边，但父元素section也收缩到只包含文本的高度高度
妈呀！标题倒是跑到右边了，可section也不再包围浮动元素了，它只包围非浮动的元
素。于是，footer被提了上来，紧挨着前一个块级元素——section。这样是没错儿，可
结果呢，不是我们想要的。
解决方法
方法一： 为父元素添加overflow:hidden
第一个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden，以强制它包围
浮动元素。
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
img {float:left;}
p {border:1px solid red;}
把overflow:hidden声明应用到容器元素后，footer又回到了我们期望的位置，如下图：
实际上，overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应
用overflow:hidden之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容
器剪切掉。除此之外，overflow:hidden还有另一个作用，即它能可靠地迫使父元素包
含其浮动的子元素。
方法二 ： 同时浮动父元素
第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来。
section {border:1px solid blue; float:left; width:100%;}
img {float:left;}
footer {border:1px solid red; clear:left;}
浮动section以后，不管其子元素是否浮动，它都会紧紧地包围（也称收缩包裹）住它的
子元素。因此，需要用width:100%再让section与浏览器容器同宽。另外，由于section
现在也浮动了，所以footer会努力往上挤到它旁边去。为了强制footer依然呆在section
下方，要给它应用clear:left。被清除的元素不会被提升到浮动元素的旁边。
方法三：添加非浮动的清除元素
第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元
素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子
元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前
面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。
第一种方式不太理想，也就是简单地在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规则！
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
好了，该回过头来作个总结了。要想强迫父元素包围其浮动的子元素有三种方式，哪三
种？
为父元素应用overflow:hidden
浮动父元素
在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元素添
加clearfix类来加（当然，样式表中得需要相应的clearfix规则）
这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应
用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示
在其父元素区域的外部，而这恰恰是overflow:hidden所要阻止的。再比如，不能对已经
靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值
浮动到左边或右边了。总之，掌握了这三种技术之后，再碰到需要包围浮动元素的情况，
你就能够游刃有余了。
实例 ：
当我们遇到多个元素向上浮动
如下图所示：
其中包含6个元素：3张图片和介绍它们的3个文本段落。这个页面布局是通过浮动图片实现的，因此在标记中跟在图片后面的文本会向
上走，停靠在浮动图片的右侧。
由于第二段文字下方有空间，所以第三张图片及说明文字会上浮到第二张图片右侧，这不是我们想要的结果
<section>
<img src="images/rubber_duck3.jpg">
<p>This text sits next to the image and because the…</p>
<img src="images/beach_ball.jpg">
<p>This text is short, so the next image can float up…</p>
<img src="images/yellow_float.jpg">
<p>Because the previous image’s text does not…</p>
</section>
我使用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>
