通用的clearboth层
日期：2014-05-16 浏览次数：20450 次
求一个通用的clearboth层
以上的<div class="clearboth">用于清理浮动布局，起到换行的作用。
但是页面在FF3.5和IE8下显示有差别。
FF3.5场合下，两行之间是没有间隙的；
但是到IE8下，两行间出现了一些间隙。
如何改进clearboth层，才能在FF3.5和IE8下都能实现无间隙换行？
------解决方案--------------------
.clearboth {clear: both; font-size: 0; height: 0; margin: 0;overflow:hidden;}
------解决方案--------------------
<!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">
加上doctype换成标准模式就好了
- HTML code
<html>
<head>
<title> </title>
<style type="text/css">
* {margin:0; padding:0;}
#d1,#d2,#d3,#d4 {float:left; width:60px;}
#d1 {background-color:red;}
#d2 {background-color:blue;}
#d3 {background-color:yellow;}
#d4 {background-color:black;}
.clearboth {clear: both; font-size: 0; height: 0; margin: 0;}
</style>
</head>
<body>
<div id="d1">1 </div>
<div id="d2">2 </div>
<!-- 清除浮动，换行 -->
<div class="clearboth"> </div>
<div id="d3">3 </div>
<div id="d4">4 </div>
</body>
</html>
以上的<div class="clearboth">用于清理浮动布局，起到换行的作用。
但是页面在FF3.5和IE8下显示有差别。
FF3.5场合下，两行之间是没有间隙的；
但是到IE8下，两行间出现了一些间隙。
如何改进clearboth层，才能在FF3.5和IE8下都能实现无间隙换行？
------解决方案--------------------
.clearboth {clear: both; font-size: 0; height: 0; margin: 0;overflow:hidden;}
------解决方案--------------------
<!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">
加上doctype换成标准模式就好了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
