浮动元素脱离了文档流,其父元素也看不到它了,因而不会包围它,比如下面的例子。
<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>
<style>
section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}
footer {border:1px solid red;}
</style>
效果如下:
现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上而下相互堆叠在一起。如果想吧第一段文字放在图片右侧,最简单的就是在图片中加一个float,其他不变。
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
但这貌似和我们想要的有差距(左图),<footer>也被提了上来。如何变为右图那种呢?有三种方法:
方法一:为父元素添加overflow:hidden
父元素添加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。被清除的元素不会被提升到浮动元素的旁边。
方法三:添加非浮动清除元素
第一种方式不太理想,即在<p>标签下面添加一个清除用的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>
section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}
第二种方式是clearfix规则
<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;
}
clearfix规则用的很多,它只添加了一个清除的包含句点作为非浮动元素(必须得有内容,而句点是最小的内容)。规则中的其他声明是为了确保这个伪元素没有高度,而且在页面上不可见。没有父节点也可以使用clearfix。