怎么在那么多的float清理方法中选择合适的-阿里云开发者社区

怎么在那么多的float清理方法中选择合适的

2017-11-15 858

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

今天在平时用的清理中的办法无法使用了，于是测试了多次，解决了。
再一次的鄙视IE浏览器。

<!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" >
/**
* @author xcf007
* @lastmodified 2008-12-6
*/

*{margin:0;padding:0;}
html
{
overflow:auto;
}
body
{
font-size:12px;
width:950px;
margin:0 auto;
}
ul
{
list-style:none;
}

a img
{
border:none;
}

a
{
text-decoration:none;
}

/*实用工具*/
#divUtils
{
width:170px;
}
#divUtils h3
{
font-size:14px;
background-color:#E7F3DC;
color:#008800;
line-height:26px;
_position:relative;

}
#divUtils h3 span
{
background-color:#fff;
display:inline-block;
border:1px solid #BBE1A6;
border-bottom:1px solid #fff;
padding:0 10px;
margin-left:5px;
}
#divUtils ul
{
border:1px solid #BBE1A6;
color:#BBE1A6;
font-size:14px;
line-height:180%;

/*关键问题在这里*/
overflow:auto;
_display:inline-block;
}
#divUtils ul li
{
_display:inline;
}
#divUtils ul a
{
color:#008800;
float:left;
margin:0 10px;
width:64px;
text-align:center;
}
#divUtils ul a:hover
{
text-decoration:underline;
}
</style>
</head>

< body >
<! --begin#内容区-- >
< div id ="divUtils" >
         < h3 > < span >实用工具 </span> </h3>
         < ul >
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
                 < li > < a href ="#" >法律词典 </a> </li>
         </ul>
</div>
<! --end#内容区-- >
</body>
</html>

貌似又好了，怪怪的ie
我常用overflow:hidden;_display:inline-block;清理浮动，
今天这个不好使了，换了overflow:hidden;height:1%;可以又换回上面这个也可以了，怪事。。。。

补充:

标准点的清理浮动方法

.leftFloat{float:left;}

.rightFloat{float:right;}

.clearFloat{overflow:auto;height:1%;}

或

.clearFloat{overflow:hidden;width:100%;}

具体还要看下你的父容器选择合适的属性值，如果你想定宽度或者固定高度，就做相应调整。

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/117606，如需转载请自行联系原作者

怎么在那么多的float清理方法中选择合适的

热门文章

最新文章

相关电子书

相关实验场景