css清除浮动
初学css，一直被清除浮动困扰。好多不一样解决方案，却说不清解决的是什么。看罢《CSS权威指南》，总算有点头绪了。将3.3.2文章粘贴如下：
浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有
时候并非我们想要的,本节向大家传授三种围住浮动子元素的方法。记住,这三种
方法你都得掌握,这样才能审时度势,选择最合适的一种。
为了演示浮动元素的行为,这种行为对布局会产生什么影响,以及解决这个问题的
三种方法,我们首先要从一张带标题的图片开始。图片和标签包含在一个 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 和
footer 的元素盒子。
section {border:1px solid blue; margin:0 0 10px 0;}
/*删除默认的上下外边距*/
p {margin 0;}
/*为简明起见,省略了字体声明*/
footer {border:1px solid red;}
可以看到页面中的两个块级元素 section 和 footer,前者包含一张图片及标题,
后者在常规文档流中位于前者下方
现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上
而下相互堆叠在一起。假设我们想让图片标题位于图片右侧,而不是像现在这样位
于下方。运用刚刚学到的知识,我们知道实现这个目标最简单的方式就是浮动图片。
试试看吧。
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
浮动图片后标题跑到了右边,但父元素 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 又回到了我们期望的位置,如图
3-20 所示。
图 3-20 给容器元素应用 overflow:hidden 声明后,它又包围了浮动元素
实际上,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。
被清除的元素不会被提升到浮动元
素的旁边。以上代码能得到与图 3-20 相同的效果。
方法三:添加非浮动的清除元素
第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的
子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会
让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元
素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。
第一种方式不太理想,也就是简单地在 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;}
这样,浮动的元素被父元素包围住了,结果如图 3-20 所示。如果你特别不想添加这
个纯表现性元素,我再告诉你一个用 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 规则!
