浮动清除的几种依法
/**第三种清除浮动标签的方法,多加了个before,将块标签前面也隐藏的添加一个块标签,让不受前面的块标签影响 */
/*.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}*/
/**第二种伪元素浮动清除方法,该 方法跟第一种在标签未尾添加一个隐藏的块标签原理一样,只是用这种方法,会自动帮创建一个隐藏的块标签,对代码的结构很友好,不会将多余的加入进来*/
.clearfix:after {
/*这种清除浮动的方法,是在父元素后面添加一个块标签,内容为空*/
content:"";
display:block; /*要转为块状元素*/
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
/*IE6\7专有*/
*zoom:1;
}
<body>
<!--可以同时应用多个类标签-->
<div class="d0 clearfix">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<!--`<div class="clear"></div>--><!--第四种清除浮动标签方法,在块标签尾添加一个空标签,用于清除掉浮动流效果-->
</div>
<div class="d5">5</div>
<!--<div class="d4">4</div>-->
</body>
类样式标签都是作用于父标签
赞 (0)