CSS清除浮动的三种方法_html/css_WEB-ITnose-html教程-PHP中文网

CSS清除浮动的三种方法_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:59:49

原创

1619人浏览过

说说 float 的几个要点就行了：
只有左右浮动，没有上下浮动。

元素设置 float 之后，它会脱离普通流（和 position: absolute; 一样），不再占据原来那层的空间，还会覆盖下一层的元素。

浮动不会对该元素的上一个兄弟元素有任何影响。

浮动之后，该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后（很好理解，因为该元素脱离普通流了，或者说不在这一层了，所以它的下一个元素当然要补上它的位置）。

如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似「文字围绕图片」的效果。（可参考css float浮动的深入研究、详解及拓展(一)中的讲解）

下一个兄弟元素如果也设置了同一方向的 float，则会紧随该元素之后显示。
该元素将变为块级元素，相当于给该元素设置了 display: block;（和position: absolute; 一样）。

css清除浮动的方法有哪些呢？经常性地会使用到float，很多邪门的事儿都有可能是浮动在作怪，清除浮动是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写css的良好习惯之一。

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

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 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;} ?> 4 </style> 5 <div id=”layout”>     6 <div id=”left”>Left</div>     7 <div id=”right”>Right</div>8 </div>

登录后复制

一、使用空标签清除浮动
　　我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用

，够简短，也有很多人用

，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

 1 <style type=”text/css”>  2 <!?     *{margin:0;padding:0;}      3 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;}      4 .clr{clear:both;}  5 ?>  6 </style>  7 <div id=”layout”>      8 <div id=”left”>Left</div>      9 <div id=”right”>Right</div>     10 <div class=”clr”></div> 11 </div>

登录后复制

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

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

立即学习“前端免费学习笔记（深入）”；

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 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;} ?> 4 </style> <div id=”layout”>     5 <div id=”left”>Left</div>     6 <div id=”right”>Right</div> <7 /div>

登录后复制

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

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 body{font:36px 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;} ?> 4 </style> 5 <div id=”layout”>     6 <div id=”left”>Left</div>     7 <div id=”right”>Right</div> 8 </div>

登录后复制

此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。