clear:both 的功效详细介绍

2021-01-20 10:52 jianzhan
如:

拷贝编码
编码以下:

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>

你能够将此一部分编码放到1个HTML网页页面看看实际效果,随后在去掉”<div style="clear:both;"></div>”看1下实际效果,就了解这句话的功效了。

如图:

(1)有clear:both的
(2)无clear:both的

这样看,应当就1目了然了:原先后面的Clear:both;实际上便是运用消除波动来把外层的div撑开,因此有时,大家在将內部div都设定成波动之。能够选用根据Hack完成:

拷贝编码
编码以下:

<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
TEST DIV</div>
</div>

里面的基本原理:
(1)、最先是运用:after这个伪类来适配FF、Chrome等适用规范的访问器。
:after伪类IE不适用,它用来和content特性1起应用设定在目标后的內容,比如:
a:after{content:"(link)";}
这个CSS可能让a标识内的文字后面再加link文字文本。
(2)、运用“* html”这个仅有IE6了解的挑选符,设定放缩特性“zoom: 1;”完成适配IE6。
(3)、运用“*:first-child + html”这个仅有IE7了解的挑选符,设定放缩特性“zoom: 1;”完成适配IE7。