CSS之浮动那些事

浏览数：26 / 时间：2015年06月09日

1.清除浮动

下面是两种常用的方式，而这两招也够用了(不用千招会，只需一招精)。

1.结尾处加空div标签 clear:both

<style type="text/css"> 

.left{float:left;}
.right{float:right;}
 
/*清除浮动代码*/
.clearfloat{clear:both}
</style> 
 
<div> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

缺点：每次清除浮动都加空div，影响了HTML的结构，例如如果要算div的个数，都会被影响到。

2.父级div定义 伪类:after

<style type="text/css"> 

.left{float:left;}
.right{float:right;}
 
.clearfloat:after{
    content:"\200B";/*unicode字符里零宽度空格*/
    display:block;
    height:0;
    clear:both;
}
</style> 
 
<div class="clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>

我更倾向使用这种清除浮动的方式，不增加HTML，浏览器兼容性也好，写法在我看来也简洁。

PS:不过如果要兼容IE6、IE7，就需要加多个zoom:1。

CSS之浮动那些事,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java style html src class 代码 java style html src

相关文章

随机文章

您可能还喜欢

您可能还喜欢