CSS 案例完成消除波动

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

HTML4STRICT编码:
  1. <div style="width:200px;border:1px solid red;">
  2.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  3.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  4.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  5.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  6.   <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  7. </div>


显示信息的結果以下:


器皿DIV沒有被撑开

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

之前我全是用这样的方式来处理:
HTML4STRICT编码:
  1. <div style="width:200px;border:1px solid red;">
  2.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  3.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  4.    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  5.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  6.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  7.     <div style="clear:both;"></div>
  8. </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直在找寻更好的处理方法。

昨日在无多次的了解了Google大仙后,我终究寻找了How To Clear Floats Without Structural Markup 这篇文章内容,寻找掌握决的方法。

最先设定这样的CSS:
CSS编码:
  1. .clearfix:after {
  2.     content: ".";
  3.     display: block;
  4.     height: 0;
  5.     clear: both;
  6.     visibility: hidden;
  7. }
随后,大家再改动原先的HTML编码,让外界的器皿DIV来应用这个CSS:
HTML4STRICT编码:
  1. <div style="width:200px;border:1px solid red;" class="clearfix">
  2.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  3.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  4.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  5.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  6.    <div  style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  7. </div>
在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编码:
  1. .clearfix:after {
  2.     content: ".";
  3.     display: block;
  4.     height: 0;
  5.     clear: both;
  6.     visibility: hidden;
  7. }
  8. /* Hides from IE-mac \*/
  9. * html .clearfix {height: 1%;}
  10. /* End hide from IE-mac */
由于转义标识符"\",Mac IE访问器会忽视掉这段Hack,但Windows IE不容易,它会运用 * html .clearfix {height: 1%;} 来做到撑开DIV器皿的目地(貌似Mac IE沒有方法处理这个难题,但是幸亏客户数量是在是太少了,Safari适用便可以了:p)。

检测1下,果真大获全胜。