UC知道CSS 清除浮动问题
来源：百度知道 编辑：UC知道 时间：2024/07/07 04:27:32
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
我在网看看到这样的代码.我自己试了一下 明显不行..它好象是以后面写的那个DIV为基准,,,根本不像.clean { clear: both; } 那么好用,,有人分析一下 是我写错了 还是怎么回事情!
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
我在网看看到这样的代码.我自己试了一下 明显不行..它好象是以后面写的那个DIV为基准,,,根本不像.clean { clear: both; } 那么好用,,有人分析一下 是我写错了 还是怎么回事情!
clear是子模块之间限定的，如下：
<div id="a">
<div id="1"></div>
<div id="2"></div>
</div>
1和2之间，用clear来限定。
而overflow:hidden是父模块对子模块来用的。就是a对于1和2模块的限定。
clear非常好理解，主要是overflow:hidden不这么好理解，我发一篇文章给你看看，这个你看完就非常明白是什么意思了。（这是我看到的一篇文章，讲的最透彻的）
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
<div id="wai">
<div id="nei"></div>
</div>
这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
#wai{ width:500px; background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}
可以看到，我给nei这个id加了一个浮动，我们常规的理解是，我们允许nei这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右