css清楚浮动的几种办法

作者：Jasmine - 2019年03月14日

平常写页面的时候经常会碰到用了float之后高度会失效之类的,这时候就要清除浮动.

比如下面的练习:

html:

<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>

css:

section {border:1px solid blue; margin:0 0 10px 0;}
/*删除默认的上下外边距*/
p {margin 0;}
/*为简明起见，省略了字体声明*/
footer {border:1px solid red;}

开始给页面新增样式看看:

section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}

会发现效果高度失效了.解决办法:

方法一：为父元素添加 overflow:hidden

第一个方法很简单，缺点是不太直观，即为父元素应用 overflow:hidden ，以强制它

包围浮动元素。

section {border:1px solid blue; margin:0 0 10px 0;  overflow:hidden;}
img {float:left;}
p {border:1px solid red;}

方法二：同时浮动父元素

第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来。

section {border:1px solid blue;  float:left; width:100%; ;}
img {float:left;}
footer {border:1px solid red;  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:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

我在自己写的所有网站中都使用 clearfix规则来解决浮动问题，因为浮动是实现多栏布局唯一最可靠的方式。

总结一下:

为父元素应用 overflow:hidden
浮动父元素
在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元
素添加 clearfix 类来加（当然，样式表中得需要相应的 clearfix 规则）

注意:!!!

这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用overflow:hidden ，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部，而这恰恰是 overflow:hidden 所要阻止的。再比如，不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值浮动到左边或右边了。总之，掌握了这三种技术之后，再碰到需要包围浮动元素的情况，你就能够游刃有余了。

没有父元素时如何清除

html:

<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>

css:

section {width:300px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
/*为简明起见，省略了字体声明*/
p {margin:0 0 5px 0;}

要实现一下效果:

给每个段落都加上 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>

.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

这样就可以了.

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/626

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！