合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

再来一个清除浮动(clearfix)

日期:2013-12-14  来源:攀枝花惠康网络公司

在写HTML代码的时辰,发此刻Firefox等合适W3C尺度的浏览器中,如不美观有一个DIV作为外部容器,内?#24247;腄IV如不美观设置了float样式,则外?#24247;?#23481;器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>

显示的结不美观如下:

P_1160709253_0.gif
容器DIV没有被撑开

巨匠可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内?#24247;腄IV因为float:left之后,就丢失踪了clear:both和display:block的样式,所以外?#24247;腄IV不会被撑开。
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>

我们想让外部容器的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<div style=”clear:both”></div> 。这样,其实就在最后增添了clear的动作。

    可是,我总感受,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时辰,因为这个DIV是容器DIV的一个字节点,如不美观这个节点被移动,则会造成排版上的Bug:如不美观要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一向在寻找更好的解决法子。

    首先设置这样的CSS:
    CSS代码:

    1. .clearfix:after {
    2. content: “.”;
    3. display: block;
    4. height: 0;
    5. clear: both;
    6. visibility: hidden;
    7. }

    然后,我们再改削原本的HTML代码,让外?#24247;?#23481;器DIV来使用这个CSS:

    昨天在无数次的询问了Google年夜仙后,我终于?#19994;?#20102;How To Clear Floats Without Structural Markup 这篇文章,?#19994;?#20307;味决的法子。

    可是,在文章中说,Windows IE并不撑持这样做。所以要让IE也完美显示,则必需在clearfix这个CSS界说的后面加上一些专门为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 */

    在Firefox里测试一下,哈哈,这样做简直很有用,显示正常,而且dojo的 Drag & Drop 也不会?#24418;?#39064;了。原本,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号”.”,而且把它的display设置成block;高度设为0;clear设为both;visibility设为潜匿。这样就达到了撑开容器的?#24247;?#21862;。

    因为转义字符”\”,Mac IE浏览器会忽略失踪这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的?#24247;模?#35980;似Mac IE没有法子解决这个问题,不外幸好?#27809;?#25968;目是在是太少了,Safari撑持就可以了:p)。

    测试一下,不美观真年夜功乐成。

    P_1160709321_0.gif

    文章来源:攀枝花惠康网络公司

    惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受?#27809;?#22909;评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 江苏体育七位数彩票中奖规则 彩票开奖东方6十1查询结果 3114单双中特 安徽11选5前三走势图 6场半全场胜负游戏 女生用陌陌赚钱 20140130上证指数 体彩开奖结果 大世界彩票安卓 新疆35选7开奖号码走势图