轩枫阁

首页 / Web前端 / CSS / 关于清除浮动

关于清除浮动

两种情况

清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both就可以了,而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。

为什么要清除浮动

一个块级元素的高度如果没有设置height,那么其高度就是由里面的子元素来撑开的,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,你可以使用firebug查看下如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析

清除子元素浮动clearfix方法

demo 1 clearfix方法

H3CBCAUM73)WB399PZ]O5UH

Html Code

Css Code

注:clearfix的方法主要就是在浮动元素的父元素上加上一个clearfix class,然后这个父元素的框就会包括所有的浮动子元素。

清除子元素浮动overflow方法

demo 2 overflow方法H3CBCAUM73)WB399PZ]O5UH

Css Code

注:这种方法主要是对父元素设置css,所以不需要加个class,下面的inline-block方法相同,只需设置父元素的css即可

清除子元素浮动inline-block方法

注:这个方法是我在写本文的时候发现的,完美兼容浏览器,因为是偶然发现的,还没有大量运用,所以暂作推荐,有兴趣的可以私下测试,当然它清除的子元素浮动和前面两种还是有点差别的,细心的你早就发现了,前面两个demo比下面的这个demo宽度要大啊呵呵,inline-block正常表现

demo 3 inline-block方法3O<code>5RX{JO</code>7WSO30PWXG)@7″ src=”http://www.xuanfengge.com/wp-content/uploads/2013/06/3O5RXJO7WSO30PWXG@7.jpg” width=”491″ height=”178″ /></a></h3>
</section>
<p>Css Code</p>
		<div id=
1
2
3
#demo3{
    display:inline-block;*display:inline;*zoom:1;
}

转载自:W3CPLUS

本文标题:关于清除浮动 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
330/456
332/456

相关文章

文章评论

  • 学习了 收藏

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]