站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: CSS 实例实现清除浮动
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

CSS 实例实现清除浮动

来源: 易采站长站
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

HTML4STRICT代码:
    <div style="width:200px;border:1px 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>


显示的结果如下:

P_1160709253_0.gif
容器DIV没有被撑开

大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

以前我都是用这样的方法来解决:
HTML4STRICT代码:
    <div style="width:200px;border:1px 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>

    显示的结果如下:

P_1160709321_0.gif
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -