关于clearBoth在GOOGLE Chrome中的问题解决方法

ttx9n · 发表于 2012-12-11 09:40:20

下面这段CSS在IE中好好的，但在GOOGLE Chrome中总是不行，我调测了无数次。问题就出在 clearBoth 这个样式上,此问题如何解决，写下来详细介绍下面这段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>

kwzc65wdj · 发表于 2023-4-16 05:41:10

看看看看

v3sfsi · 发表于 2023-6-6 19:49:30

加快速度很快就撒谎

7jbiiz · 发表于 2023-9-5 23:47:24

啦啦啦啦啦啦哈哈哈

feiyasqhr · 发表于 2023-10-25 23:40:08

灌灌灌灌水

plvo189 · 发表于 2023-12-5 09:10:35

天天源码论坛

白狐软件 · 发表于 2023-12-8 23:41:45

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

r8st9 · 发表于 2024-4-13 09:08:23

66666666666666666666

i3x3r3 · 发表于 2024-5-17 22:50:22

女生看了弄丢了卡萨诺的卡洛斯

errol123 · 发表于 2024-7-1 09:18:13

天天源码社区论坛

账号		自动登录	找回密码
密码			立即注册

[CSS] 关于clearBoth在GOOGLE Chrome中的问题解决方法

相关帖子