通过CSS实例实现清除浮动
来源：互联网 责任编辑：栏目编辑 发表时间:2013-07-01 22:43 点击:次
在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子：
HTML4STRICT代码：
显示的结果如下：
容器DIV没有被撑开
大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。这是因为内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度，要怎么解决呢？
以前我都是用这样的方法来解决：
HTML4STRICT代码：
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>
显示的结果如下：
容器DIV没有被撑开
大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。这是因为内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度，要怎么解决呢？
以前我都是用这样的方法来解决：
HTML4STRICT代码：
相关新闻>>
最新推荐更多>>>
- 发表评论
-
- 最新评论 更多>>