近期弄网页写了一个高3px的双色横线，在IE7上面和FF上面显示正常，可是一放到IE6就显示出错了。
由此发现自己对clear，overflow等样式还不太熟悉，以下做一下学习笔记
由clear准备一个例子来深化其应用理解：
用float及clear打造液态三栏布局
<style type="text/css">
<!--
body{margin:0;padding:0;}
#header{height:50px;clear:both;background-color: aqua;padding:1px;}
#left{width:100px;float:left;background-color:red;}
#right{width:200px;float:right;background-color:green;}
#middle{padding:0 210px 0 110px; border:#CCCCCC 1px solid !important;}
#footer{clear:both;height:50px; background-color:#00FFFF;}
-->
</style>
<body>
<div id=header><h1>Header</h1></div>
<div id=left>left</div>
<div id=right>right</div>
<div id=middle>middle</div>
<div id=footer>footer</div>
</body>
div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。
由此发现自己对clear，overflow等样式还不太熟悉，以下做一下学习笔记
定义和用法
clear 属性设置一个元素的侧面是否允许其他的浮动元素。
可能的值
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认。允许浮动元素出现在两侧。 |
由clear准备一个例子来深化其应用理解：
用float及clear打造液态三栏布局
<style type="text/css">
<!--
body{margin:0;padding:0;}
#header{height:50px;clear:both;background-color: aqua;padding:1px;}
#left{width:100px;float:left;background-color:red;}
#right{width:200px;float:right;background-color:green;}
#middle{padding:0 210px 0 110px; border:#CCCCCC 1px solid !important;}
#footer{clear:both;height:50px; background-color:#00FFFF;}
-->
</style>
<body>
<div id=header><h1>Header</h1></div>
<div id=left>left</div>
<div id=right>right</div>
<div id=middle>middle</div>
<div id=footer>footer</div>
</body>
div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
