CSS清除浮动方法总汇-css教程-PHP中文网

CSS清除浮动方法总汇

巴扎黑

发布： 2017-04-05 16:48:57

原创

1255人浏览过

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

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

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0; }
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
</style>

<p id="layout">
<p id="left">Left</p>
<p id="right">Right</p>

登录后复制

未清除浮动前如图所示：

未清除浮动图片

三种清除浮动方法如下：

1、使用空标签清除浮动。

我用了很久的一种方法，空标签可以是p标签，也可以是p/span/br等标签，理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

ps:<br clear=”all”/>也可以实现效果。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0; }
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }.clr { clear:both; }</style>

<p id="layout">
<p id="left">Left</p>
<p id="right">Right</p><p style="clear:both"/></p>

登录后复制

2、使用overflow属性。

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0; overflow:auto; zoom:1; }
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
</style>
</head> 
<body>
<p id="layout">
<p id="left">Left</p>
<p id="right">Right</p>

登录后复制

3、使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，网上讨论该方法的时候content属性的值设为”.”，但我发现为空也是可以的。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0;  }#layout:after{display:block;clear:both; content:""; visibility:hidden;height:0;}#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
</style>

<p id="layout">
<p id="left">Left</p>
<p id="right">Right</p>

登录后复制

清除浮动后如图所示：

清除浮动后的图片