清除CSS浮动的方法原理及优缺点评定-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 清除CSS浮动的方法原理及优缺点评定
清除CSS浮动的方法原理及优缺点评定
时间：&&&文章来源：马海祥博客&&&访问次数：
今天看到有个博友问如何清除网站页面的CSS浮动？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。
其实解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。在此我根据自己多年做网站的经验总结8种清除浮动的方法在马海祥博客上跟大家分享一下：
1、父级div定义伪类:after和zoom
&style type=&text/css&&
&　& .div1{background:#000080;border:1}
&　& .div2{background:#800080;border:1height:100margin-top:10px}
&　& .left{float:width:20%;height:200background:#DDD}
&　& .right{float:width:30%;height:80background:#DDD}
　&& /*清除浮动代码*/
&　& .clearfloat:after{display:clear:content:&&;visibility:height:0}
&　& .clearfloat{zoom:1}
&　& &/style&
　　&div class=&div1 clearfloat&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
评分：★★★★☆
2、父级div定义overflow:hidden
&style type=&text/css&&
&　& .div1{background:#000080;border:1/*解决代码*/width:98%;overflow:hidden}
&　& .div2{background:#800080;border:1height:100margin-top:10width:98%}
&　& .left{float:width:20%;height:200background:#DDD}
&　& .right{float:width:30%;height:80background:#DDD}
&　& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：简单，代码少，浏览器支持好。
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
评分：★★★☆☆
3、结尾处加空div标签clear:both
&style type=&text/css&&
　&& .div1{background:#000080;border:1px solid red}
　&& .div2{background:#800080;border:1height:100margin-top:10px}
&　& .left{float:width:20%;height:200background:#DDD}
　&& .right{float:width:30%;height:80background:#DDD}
　&& /*清除浮动代码*/
　&& .clearfloat{clear:both}
　&& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&div class=&clearfloat&&&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单，代码少，浏览器支持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
评分：★★★☆☆
4、父级div定义height
&style type=&text/css&&
　　&& .div1{background:#000080;border:1/*解决代码*/height:200}
　　&& .div2{background:#800080;border:1height:100margin-top:10px}
&　　& .left{float:width:20%;height:200background:#DDD}
　　&& .right{float:width:30%;height:80background:#DDD}
　　&& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单，代码少，容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用。
评分：★★☆☆☆
5、父级div定义overflow:auto
&style type=&text/css&&
&　　& .div1{background:#000080;border:1/*解决代码*/width:98%;overflow:auto}
&　　& .div2{background:#800080; border:1 height:100 margin-top:10 width:98%}
&　　& .left{float:width:20%;height:200background:#DDD}
　　&& .right{float:width:30%;height:80background:#DDD}
　　&& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。
优点：简单，代码少，浏览器支持好。
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
评分：★★☆☆☆
6、父级div定义display:table
&style type=&text/css&&
　&& .div1{background:#000080; border:1 /*解决代码*/ width:98%; display: margin-bottom:10}
　&& .div2{background:#800080;border:1height:100width:98%;}
　&& .left{float:width:20%;height:200background:#DDD}
　&& .right{float:width:30%;height:80background:#DDD}
　&& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：将div属性变成表格。
缺点：会产生新的未知问题。
建议：不推荐使用，只作了解。
评分：★☆☆☆☆
7、父级div也一起浮动
&style type=&text/css&&
　　.div1{background:#000080;border:1/*解决代码*/width:98%;margin-bottom:10float:left}
　&& .div2{background:#800080;border:1height:100width:98%;/*解决代码*/clear:both}
　&& .left{float:width:20%;height:200background:#DDD}
&　& .right{float:width:30%;height:80background:#DDD}
&　& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：所有代码一起浮动，就变成了一个整体。
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。
评分：★☆☆☆☆
8、结尾处加br标签clear:both
&style type=&text/css&&
&&　 .div1{background:#000080;border:1margin-bottom:10zoom:1}
　&& .div2{background:#800080;border:1height:100px}
　&& .left{float:width:20%;height:200background:#DDD}
　&& .right{float:width:30%;height:80background:#DDD}
　&& .clearfloat{clear:both}
　&& &/style&
　　&div class=&div1&&
　　&div class=&left&&Left&/div&
　　&div class=&right&&Right&/div&
　　&br class=&clearfloat& /&
　　&/div&
　　&div class=&div2&&
　　&/div&
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both。
建议：不推荐使用，只作了解。
评分：★☆☆☆☆
马海祥博客点评：
对于以上清除CSS浮动的8种方法，都已通过ie、chrome、firefox、opera的测试，不过，对于后面的3种方法只做了解就可以了，不作为重要的方法。
本文为原创文章，如想转载，请注明原文网址摘自于/css/450.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
清明节又叫踏青节，在仲春与暮春之交，也就是冬至后的第108天。是中国传统节日，也是最重要的祭祀节日之一……
最近百度跟360的搜索引擎之争，也使得更多人开始关注搜索引擎了，回想搜索引擎的快速发展也就是近15年发生……
网络实名制是个长期以来争议不断的话题。一方面，当人们面对越来越多的网上低俗与不良信息、黑客与木马、网……
最近一直听到圈里的朋友抱怨说，自己辛辛苦苦写的文章，发表的前……
很多做SEO的朋友都会问，是不是网站收录越多网站关键字排名越好……
作为一名专业的SEO人员，我们很多的时候都在研究站点中有多少页……
最近，我明显发现访问马海祥seo博客的博友越来越多了，随之而来……
相信做个seo的，或者自己已经是站长的，都或多或少的对自己负责……
由于此次整理的SEO作弊方法大全的内容比较多，也比较全面，导致……
本月热点文章理解CSS浮动与清除浮动
CSS的浮动，算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话，只能说知其然而不知其所以然。虽然很多人都说浮动会用就行，但是要想成为一个优秀的前端，对
CSS的浮动，算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话，只能说&知其然而不知其所以然&。虽然很多人都说浮动会用就行，但是要想成为一个优秀的前端，对这些常用属性得知根知底。
恰巧在慕课网，张鑫旭老师开了《CSS深入理解之float浮动》这门课。链接在文末，有兴趣的可以听听，老师讲课风格很风趣&&
Float设计的初衷，是为了实现文字环绕效果。就像下图展示的一样（图片源于w3school）：
嗯，就这么简单。
在这儿，我们用一个例子来说明子元素设置浮动，从而引起父元素高度塌陷的问题。
首先写一个div，里面插入一张图片。
&div id=&div&& &img src=&./source/head.jpg&& &/div&
我们再给div设置一个border，为了让大家看的清楚。 CSS设置如下：
#div { border: 5 width: 600 }
最后效果是这样的:
通过chrome控制台，可以看到此时div的高度为464px。
接下来，我们给那张图片添加浮动效果。
#div img{ float: }
再看网页，发现父元素已经塌陷了,之前的边框也消失不见了，成为一条线了。
此时再去控制台查看div的高度，高度为0px。
很多人把这个现象称为浮动带来的BUG。但从一开始Float的用途来思考：
&Float设计的初衷，是为了实现文字环绕效果。&
(责任编辑：最模板)
------分隔线----------------------------
可能正在使用pre标签。这是一个 HTML 中非常特别的标签，它允许...
一、asp语言和PHP语言 首先制作一个头部文件head.asp，或者一个底...
本文将介绍如何一步一步制作出一些3D效果的云彩，会用到一些...
背景和字体一样，是一个复合属性，而且它是一个使用频率很高...
JS获取对象的某个CSS属性值,该方法很强大，兼容所有浏览器，可...
CopyRight (C)
最模板 , 深圳奇好科技有限公司 All Rights Reserved.&nbsp&#8250&nbsp&nbsp&#8250&nbsp
彻底解决浮动引起的div不能撑开的问题，css技巧
&&&&前端开发人员在学习别人的代码的时候肯定能经常看&&div style=&clear:&&&/div&&这样的代码，但是你真的能明白它是做什么用的吗？比如：&div style="border:2"&
&div style="float:width:80height:80border:1"&TEST DIV&/div&
&div style="clear:"&&/div&
&/div&&&&&你可以将此部分代码放到一个HTML页面看看效果，然后在去掉&&div style=&clear:&&&/div&&看一下效果,就知道这句话的作用了。&&&&原来后边的Clear:其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。&&&&但这种办法并不是最好的，可以通过更完美的方式实现。你只要到Google或者Baidu随便一搜&css清除浮动&，就会发现很多网站都讲到&盒子清除内部浮动时可以用到.clearfix&。.clearfix不是一个技术的代名词，而是很多人都在使用相同的方法，并且取了个相同的名字。很多大型网站是这样写的：&style&
.clearfix:after{
visibility:
font-size: 0;
content: ".";
height: 0;
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
&div class="clearfix" style="border: 2"&
&div style="float: width: 80 height: 80 border: 1"&
&/div&看完解决办法，咱们来看里边的原理：首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。:after伪类用来和content属性一起使用设置在对象后的内容，例如：a:after{content:&(link)&;}这个CSS将会让a标签内的文本后边加上link文本文字。同理.clearfix:after{
visibility:
font-size: 0;
content: ".";
height: 0;
}这个css给class为clearfix的元素后面加了个文本内容为“.”,清除两边浮动，内容不可见的块元素。也就相当于&&div style=&clear:&&&/div&&。用.clearfix:after伪类的目的，仅仅是不想去写一个无意义的div在后面。如果你不觉得&&div style=&clear:&&&/div&&影响代码的美观，你完全可以忽略.clearfix:after。但是IE不支持:after伪类。利用&* html&这个只有IE6认识的选择符，设置缩放属性&zoom: 1;&触发hasLayout，从而使元素闭合内部的浮动。实现兼容IE6。至于什么是hasLayout，可以自己百度一下。我对hasLayout的认识就是，这是微软留给开发人员的蛋疼东西，只知道该怎么用就行了，不想去了解它。利用&*:first-child + html&这个只有IE7认识的选择符，设置缩放属性&zoom: 1;&实现兼容IE7。&
上一篇： 随着 3G 的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在 600 像素以下；PC 的屏幕宽度，一般都
下一篇： 写css，你少不了与margin打交道。但是你是否思考过这些问题： margin有什么特性？ 什么是垂直外边距合并？ margin在块元素、内联元素中的区别？ 什么时候该用padding而不是margin？ 常见的浏览器下margin出现的bug有哪些？ 当然还有更多的问题，这里暂时只想1.css中的浮动：
在css中为了让元素移动到父元素的左边或者右边，我们可以对元素设置浮动float.
2.float:left/right
浮动的选择有两种，一种是float:left左浮动。还有一种是float:right右浮动
3.如果对一个元素设置了浮动，那么这个元素就会脱离标准文档流，并且该元素后面的元素会占据该元素原本的位置，并且元素后面的内容会被挤出。
4.加了浮动的元素是没有宽和高的，并且该元素的父元素的高度也会显示即高度塌陷，加了浮动的元素的宽和高是根据元素内部的内容动态需变化的。要对其父元素重新设置高度。
5.如果对某些元素设置了左浮动，那么这些元素会在同一排显示，但是如果这些元素的宽度和大于父元素，超出的部分(包括该元素)就会在下一行显示。
6.浮动的应用：
在网页布局的时候，一般一个网页的主体会分为几列，这时候我们可以使用浮动来实现。
内容包裹图片显示的时候，我们对图片设置浮动就可以，剩下的元素会占据图片原本的位置，但是内部的文本内容会在四周显示，即文本内容会被挤出。
在设置网站的横向导航的时候，，可以对列表元素设置浮动。
7.在实际应用的时候，我们需要对某些受到浮动影响的元素设置清除浮动，即不需要占据浮动元素原本的位置，我们可以通过设置clear:both/left/right.
8.clear:both &清除所有的浮动影响，不管是左浮动还是右浮动
& &clear:left & &清除左浮动的影响
& &clear:right &清除右浮动的影响
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：15914次
排名：千里之外
原创：50篇
(5)(12)(16)(18)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'}