关于clearBoth在GOOGLE Chrome中的问题解决方法
(编辑：jimmy 日期: 2024/11/5 浏览：3 次 )
下面这段CSS在IE中好好的，但在GOOGLE Chrome中总是不行，我调测了无数次。问题就出在 clearBoth 这个样式上，本来这个样式是做为换行用的清除DIV浮动状态的样式，在IE7中正常，但在GOOGLE Chrome却空出很大一块，不知道是什么原因？
代码如下：
复制代码代码如下:
<html>
<head>
<style>
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
float: left;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
</style>
</head>
<body>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left;">
sasadf</div>
<div class="clearBoth">
</div>
<div style="float: left;">
sasabbbbbbbbbbbbbbbbbbbbbdf</div>
</div>
<div class="clearBoth">
</div>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left; height: 40px; background: red;">
aaa</div>
<div style="float: left; height: 40px; background: blue;">
bbbbbbbbbbbbb</div>
<div class="clearBoth">
</div>
<div style="float: left; height: 40px; background: yellow;">
aaa</div>
<div style="float: left; height: 40px; background: green;">
bbbbbbbbbbbbb</div>
</div>
</body>
</html>
如下的样式：
复制代码代码如下:
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
float:left;
}
上面的样式加上float:left;就可以解决这个问题，但需要请调整margin的数值到所需要的值，它是以它左边的那个userinfo为参考点，多个元素在一行应该都要定义float排列在一行，同一行的那两个div应该用一个大的div包起来，还有就是如果要换行，直接对需要换行的元素定义clear:both;就好了，没必要加一个
这样的元素在那，有时候我们加这个元素是为撑开兼容才用的。
详解代码如下:
复制代码代码如下:
<!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>
<title></title>
<style type="text/css">
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
position:absolute;
left:0;
top:0;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
.outbox{clear:both; float:left; width:100%; position:relative;margin-bottom:10px; }
.red{ float:left;height:40px; background:red;}
.blue{ float:left;height:40px; background:blue;}
.yellow{float:left; height:40px; background:yellow;}
.green{ float:left;height: 40px; background:green;}
</style>
</head>
<body>
<div class="outbox">
<div class="userInfo">
</div>
<div class="chartPanel">
<div>
sasadf
</div>
<div class="clearBoth">
sasabbbbbbbbbbbbbbbbbbbbbdf
</div>
</div>
</div>
<div class="outbox">
<div class="userInfo">
</div>
<div class="chartPanel">
<div class="clearBoth">
<div class="red">
aaa
</div>
<div class="blue">
bbbbbbbbbbbbb
</div>
</div>
<div class="clearBoth">
<div class="yellow">
aaa
</div>
<div class="green">
bbbbbbbbbbbbb
</div>
</div>
</div>
</div>
</body>
</html>
代码如下：
复制代码代码如下:
<html>
<head>
<style>
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
float: left;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
</style>
</head>
<body>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left;">
sasadf</div>
<div class="clearBoth">
</div>
<div style="float: left;">
sasabbbbbbbbbbbbbbbbbbbbbdf</div>
</div>
<div class="clearBoth">
</div>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left; height: 40px; background: red;">
aaa</div>
<div style="float: left; height: 40px; background: blue;">
bbbbbbbbbbbbb</div>
<div class="clearBoth">
</div>
<div style="float: left; height: 40px; background: yellow;">
aaa</div>
<div style="float: left; height: 40px; background: green;">
bbbbbbbbbbbbb</div>
</div>
</body>
</html>
如下的样式：
复制代码代码如下:
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
float:left;
}
上面的样式加上float:left;就可以解决这个问题，但需要请调整margin的数值到所需要的值，它是以它左边的那个userinfo为参考点，多个元素在一行应该都要定义float排列在一行，同一行的那两个div应该用一个大的div包起来，还有就是如果要换行，直接对需要换行的元素定义clear:both;就好了，没必要加一个
这样的元素在那，有时候我们加这个元素是为撑开兼容才用的。
详解代码如下:
复制代码代码如下:
<!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>
<title></title>
<style type="text/css">
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
position:absolute;
left:0;
top:0;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
.outbox{clear:both; float:left; width:100%; position:relative;margin-bottom:10px; }
.red{ float:left;height:40px; background:red;}
.blue{ float:left;height:40px; background:blue;}
.yellow{float:left; height:40px; background:yellow;}
.green{ float:left;height: 40px; background:green;}
</style>
</head>
<body>
<div class="outbox">
<div class="userInfo">
</div>
<div class="chartPanel">
<div>
sasadf
</div>
<div class="clearBoth">
sasabbbbbbbbbbbbbbbbbbbbbdf
</div>
</div>
</div>
<div class="outbox">
<div class="userInfo">
</div>
<div class="chartPanel">
<div class="clearBoth">
<div class="red">
aaa
</div>
<div class="blue">
bbbbbbbbbbbbb
</div>
</div>
<div class="clearBoth">
<div class="yellow">
aaa
</div>
<div class="green">
bbbbbbbbbbbbb
</div>
</div>
</div>
</div>
</body>
</html>
下一篇：js 解决隐藏与显示div的相关问题