完美清除浮动的两种解决方案

最新推荐文章于 2023-07-20 17:15:10 发布

陌上风情

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量1.1k

点赞数

分类专栏： Html与Css 文章标签： border float class xhtml div html

本文链接：https://blog.csdn.net/liuyong0818/article/details/4004903

版权

Html与Css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

浮动一直是我们编写网页最常用的方法，但是也是最不听话的，一不小心会乱跑，虽然有万能的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=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> 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>

最近在网上看到有朋友想出了新招来清除浮动，显得更简洁，贴在这里，与之比较：

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .clearfix {zoom:1} .clearfix:after { content: '/20'; display: block; clear: both; } ul{border:1px solid #ccc} ul li{float:left;width:120px;line-height:25px;text-align:center} </style> <ul class="clearfix"><li>选项一</li><li>选项二</li><li>选项三</li></ul>

原文：http://www.ajaxbbs.net/post/webFront/simple-clear-float.html

陌上风情

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
完美清除浮动的两种解决方案

浮动一直是我们编写网页最常用的方法，但是也是最不听话的，一不小心会乱跑，虽然有万能的float闭合div多写一个可以解决掉，但是为了清除浮动而多出来一个空的div实在看着不爽，这里我在网上找到了两种解决的办法，相信很多朋友已经在用了，不过还是列出来，以备后用。无标题文档<!-- ul{ list-style:none; height:auto; margi
复制链接

扫一扫