css清除浮动常用方法汇总
2011-03-04 阅读 401
#### 常用清除浮动的三种方法：
下面是没有清除浮动的代码，运行代码发现父级的浅黄色背景无法显示。为什么呢？
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html ＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞css清除浮动常用方法汇总＜/title＞
＜style type="text/css" ＞
*{ margin:0; padding:0;}
body{ font-size:36px; font-weight: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＞
＜/head＞
＜body＞
＜div id="layout"＞
＜div id="left"＞left＜/div＞
＜div id="right"＞right＜/div＞
＜/div＞
＜/body＞
＜/html＞
```
效果如图示：
三种清除浮动的方法如下：
1.使用空标签清除浮动。空标签是指：理论上是所有的标签都可以，但是为了简单在这里推荐div 或者p标签。
代码如下：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html ＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞css清除浮动常用方法汇总＜/title＞
＜style type="text/css" ＞
*{ margin:0; padding:0;}
body{ font-size:36px; font-weight: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;} .clear{ clear:both;}
＜/style＞
＜/head＞
＜body＞
＜div id="layout"＞
＜div id="left"＞left＜/div＞
＜div id="right"＞right＜/div＞ ＜div class="clear"＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
```
2.使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。
代码如下：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html ＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞css清除浮动常用方法汇总＜/title＞
＜style type="text/css" ＞
*{ margin:0; padding:0;}
body{ font-size:36px; font-weight: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＞
＜/head＞
＜body＞
＜div id="layout"＞
＜div id="left"＞left＜/div＞
＜div id="right"＞right＜/div＞
＜/div＞
＜/body＞
＜/html＞
```
3.使用after伪对象清除浮动。该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”。（因使用范围的局限性，个人不推荐使用）
代码如下：
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html ＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞css清除浮动常用方法汇总＜/title＞
＜style type="text/css" ＞
*{ margin:0; padding:0;}
body{ font-size:36px; font-weight:bold; color:#f00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
#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＞
＜/head＞
＜body＞
＜div id="layout"＞
＜div id="left"＞left＜/div＞
＜div id="right"＞right＜/div＞
＜/div＞
＜/body＞
＜/html＞
```
最终效果如图：
css 浮动 方法 汇总 清除
更新于 2023年03月28日
赞 832
