用clearfix:after清除css波动处理外界div不可以撑开难

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

在写HTML编码的情况下,造就在Firefox等合乎W3C规范的访问器中,假如有1个DIV做为外界器皿,內部的DIV假如设定了float款式,则外界的器皿DIV由于內部沒有clear,致使不可以被撑开。看下面的事例:

拷贝编码
编码以下:

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

运作这段编码,大伙儿能够看到,做为外界器皿的边框为鲜红色的DIV,沒有被撑开。这是由于內部的DIV由于float:left以后,就缺失了clear:both和display:block的款式,因此外界的DIV不容易被撑开。
大家想让外界器皿的DIV伴随着內部DIV增多而提升高宽比,要如何处理呢?

之前我全是用这样的方法 来处理:

拷贝编码
编码以下:

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

大家看到,在器皿DIV内要显示信息出来的float:left的全部的DIV以后,大家加上了这样的1个DIV:<div style="clear:both"></div>。这样,实际上就在最终提升了clear的姿势。

可是,我总觉得,这么多加1个DIV有点不当之处。1是多了1个沒有实际意义的DIV,2是在用dojo做Drag & Drop的情况下,因为这个DIV是器皿DIV的1个字连接点,假如这个连接点被挪动,则会导致排版上的Bug:假如要显示信息的蓝框的DIV被移到这个DIV以后,则由于clear:both,它会被强制性 换1行显示信息。因此,我1直在找寻更好的处理对策。

处理的对策:
最先设定这样的CSS:
CSS编码:

拷贝编码
编码以下:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

随后,大家再调整本来的HTML编码,让外界的器皿DIV来运用这个CSS:
HTML4STRICT编码:

拷贝编码
编码以下:

<style>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}

在Firefox里检测1下,哈哈,这样做确实很合理,显示信息一切正常,并且dojo的 Drag & Drop 也不容易有难题了。本来,这个clearfix的CSS运用了after这个伪目标,它将在运用 clearfix的元素的末尾加上content中的內容。在这里加上了1个句号".",而且把它的display设定成block;高宽比设为 0;clear设为both;visibility设为潜藏 。这样就做到 了撑开器皿的总体目标啦。

可是,Windows IE其实不支撑点这样做。因此要让IE也健全显示信息,则务必在clearfix这个CSS界定的后边再加1些专业为IE设置的HACK。CSS以下:
CSS编码:
编码:

拷贝编码
编码以下:

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

由于转义标识符"\",Mac IE浏览器会轻视 掉这段Hack,但Windows IE不容易,它会运用 * html .clearfix {height: 1%;} 来做到 撑开DIV器皿的总体目标(貌似Mac IE沒有对策处理这个难题,但是幸亏客户数量是在是太少了,Safari支撑点便可以了:p)。
上一篇:访问器怎样分辨css优先选择级 返回下一篇:没有了