网络编程
位置:首页>> 网络编程>> 网页设计>> CSS清除浮动常用方法小结

CSS清除浮动常用方法小结

作者:heiniu 来源:阿里妈妈UED 发布时间:2009-07-07 11:59:00 

标签:css,布局,float,清除浮动

使用xhtml+css布局经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,那么清除浮动就是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

常用的清除浮动的方法有以下三种:

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#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>

未清除浮动前如图所示:

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com