您现在的位置是：网站首页> 编程资料编程资料

css 完美清除浮动的两种解决方案_CSS教程_CSS_网页制作_

2021-09-09 761人已围观

简介浮动一直是我们编写网页最常用的方法，但是也是最不听话的，一不小心会乱跑，虽然有万能的float闭合div多写一个可以解决掉，但是为了清除浮动而多出来一个空的div实在看着不爽，这里我在网上找到了两种解决的办法，相信很多朋友已经在用了，不过还是列出来，以备后用。 [html

浮动一直是我们编写网页最常用的方法，但是也是最不听话的，一不小心会乱跑，虽然有万能的float闭合div多写一个可以解决掉，但是为了清除浮动而多出来一个空的div实在看着不爽，这里我在网上找到了两种解决的办法，相信很多朋友已经在用了，不过还是列出来，以备后用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>完美清除浮动的两种解决方案</title><style type="text/css"> ul{ list-style:none; height:auto; margin:0; padding:0; background-color:#436973; } li{ float:left; width:80px; height:120px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF00FF; margin-bottom:5px; } .overflow{ height:auto; _height:200px; min-height:200px; overflow:auto; zoom:1; _overflow:visible; } .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }/*for w3c*/ .clear { zoom:1; }/*for IE*/ </style></head><body><div class="demo"><ul class="overflow"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="demo"><ul class="clear"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></body></html>

提示：您可以先修改部分代码再运行

上一篇：纯css 鼠标移上查看大图的效果_CSS教程_CSS_网页制作_

下一篇：CSS 浏览器兼容问题整理大全(比较全)_浏览器兼容教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

css 完美清除浮动的两种解决方案_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢