围住浮动元素的三种方法

2019独角兽企业重金招聘Python工程师标准>>>

方法一：为父元素添加 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;}
这样，浮动的元素被父元素包围住了，结果如图 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规则！
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

转载于:https://my.oschina.net/u/1045177/blog/518722