清除浮动

如何使用CSS清除浮动的方法

这篇文章主要介绍了关于如何使用CSS清除浮动的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了，下面总结8种清除浮动的方法，测试已通过 ie chrome firefox opera，需要的朋友可以参考下清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）： 1，父级p定义 height .p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} Left Right p2 原理：父级p手动定义height，就解决了父级p无法自动获取到高度的问题。 优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级p不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 2，结尾处加空p标签 clear:both .p1{background:#000080;border:1px solid red} .p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat{clear:both} Left Right p2 原理：添加一个空p，利用css提高的clear:both清除浮动，让父级p能自动获取到高度 优点：简单、代码少、浏览器支持好、不容易出现怪问题 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空p，让人感觉很不好 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 3，父级p定义 伪类:after 和 zoom .p1{background:#000080;border:1px solid red;} .p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} Left Right p2 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 建议：推荐使用，建议定义公共类，以减少CSS代码。 4，父级p定义 overflow:hidden .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} .p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} Left Right p2 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。 5，父级p定义 overflow:auto .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} .p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} Left Right p2 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好 缺点：内部宽高超过父级p时，会出现滚动条。 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 6，父级p 也一起浮动 .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} .p2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} Left Right p2 原理：所有代码一起浮动，就变成了一个整体 优点：没有优点 缺点：会产生新的浮动问题。 建议：不推荐使用，只作了解。 7，父级p定义 display:table .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} .p2{background:#800080;border:1px solid red;height:100px;width:98%;} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} Left Right p2 原理：将p属性变成表格 优点：没有优点 缺点：会产生新的未知问题。 建议：不推荐使用，只作了解。 8，结尾处加 br标签 clear:both .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} .p2{background:#800080;border:1px solid red;height:100px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} .clearfloat{clear:both} Left Right p2 原理：父级p定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both 建议：不推荐使用，只作了解。

CSS里怎么清除浮动

如果想要清楚浮动，那么首先你要弄清浮动产生的原因。本篇文章给大家归纳了浮动产生的原因以及副作用，还有最重要的，怎么清除浮动，清除浮动的方法。一、浮动产生原因一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。二、浮动产生负作用1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。三、css解决浮动，清除浮动方法 这里为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置div css border，父级css边框颜色为红色，两个子级边框颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设置相同高度100px，父级css height高度暂不设置（通常为实际css布局时候这样父级都不设置高度，而高度是随内容增加自适应高度）。父级CSS命名为“.div”对应html标签使用“”两个子级CSS命名分别为“.div-left”“.div-right”根据以上描述DIV给出对应CSS代码和HTML代码片段CSS代码：.div{ width:400px; border:1px solid #F00; background:#FF0} .div-left,.div-right{ width:180px; height:100px; border:1px solid #00F; background:#FFF} .div-left{ float:left} .div-right{ float:right}对应html源代码片段： left浮动 right浮动 以下总结了几点用于清除浮动的经验教程1、对父级设置适合CSS高度对父级设置适合高度样式清除浮动，这里对“.div”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102pxCSS代码：.div{ width:400px;border:1px solid #F00;background:#FF0; height:102px} .div-left,.div-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .div-left{ float:left} .div-right{ float:right}CSS高度设置清除浮动法使用height高度清除浮动小结，使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。2、clear:both清除浮动为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加此div引入“class="clear"”样式。这样即可清除浮动。具体CSS代码：.div{ width:400px;border:1px solid #F00;background:#FF0} .div-left,.div-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .div-left{ float:left} .div-right{ float:right} .clear{ clear:both}Html代码： left浮动 right浮动 使用CSS clear清除浮动这个css clear清除float产生浮动，可以不用对父级设置高度 也无需技术父级高度，方便适用，但会多加CSS和HTML标签。3、父级div定义 overflow:hidden对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。overflow:hidden解决CSS代码：.div{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden} .div-left,.div-right{width:180px;height:100px;border:1px solid #00F;background:#FFF} .div-left{ float:left} .div-right{ float:right}HTML代码不变。为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法推荐使用。以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。相信阅读了这篇文章你已经万全了解了浮动这个属性，有需要的朋友可以保存一下，也请大家持续关注本站的其他更新。相关阅读：为什么HTML网页乱码与解决方法HTML里的checkbo怎么使用HTML里的命名规则