clearfix div flaot 清除

<style type=”text/css”>
.d1{ width:100%; border:1px solid red;}
.d2{ float:left; width:30%; height:20px; border:1px solid blue;}

</style>
<body >

<div class=”d1 clearfix”>
    <div class=”d2″>彩色</div>
    <div class=”d2″>出色</div>
</div>

如想外部div容器自适应高度,被里面的容器撑开;在遇到里面的容器float时,则外部不能有效地撑开。

之前的做法即在里面的容器下面加上<div style=”clear:both”></div>清除浮动即可,但这回多出一个没有实际意义的div容器。

现一个新的做法:用clearfix:after消除 css浮动

在加一段样式:

.clearfix:after{ content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
*html .clearfix{ height:1%; }

 应用ok。

详解:关于clearfix清除浮动

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*