浮动清除的几种依法

/**第三种清除浮动标签的方法,多加了个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)

相关推荐