在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素（float为left或right），此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢？
一般使用clear属性清除浮动。但是要注意的是clear属性只能清除标记左右两侧浮动的影响，然而在网页开发时，经常会受到一些特殊的浮动影响，例如，对子标记设置浮动时，如果不对其父标记定义高度，则子标记的浮动会对父标记产生影响。使用clear属性并不能消除子标记浮动对父标记的影响。因此小编整理了三种清除浮动的方法：
1)使用空标记清除浮动
在浮动标记之后添加空标记，并对该标记应用“clear: both”样式，可清除标记浮动所产生的影响，这个空标记可以是<dv>、<p>、<hr/>等任何标记。
2)使用 overflow属性清除浮动
对标记应用 overflow:hidden”样式，也可以清除浮动对该标记的影响。这种方式弥补了空标记清除浮动的不足。
需要注意的是，在使用“ overflow: hidden”样式清除浮动时，一定要将该样式写在被影响的标记中。
3)使用after伪对象清除浮动
使用 after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用 after伪对象清除浮动时需要注意以下两点：1）必须为需要清除浮动的标记伪对象设置“height:0;”样式，否则该标记会比其实际高度高出若干像素。2）必须在伪对象中设置 content属性，属性值可以为空，如“content:””;”。
以上就是为大家分享的关于前端开发中CSS清楚浮动的方法。?前端技术相对后台编程更容易入门，而前端开发工程师职业发展以及就业薪资非常稳定。如果想要系统学习Web前端开发技能。可以直接通过博学谷官网了解在线学习前端+移动开发的课程。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
前端工程师求职面试题含答案
下一篇：
前端有关node.js的面试题含答案
相关推荐 更多
Web前端开发在线培训班靠不靠谱？学了能就业吗?
目前，前端开发工程师在人才市场上可谓是格外的紧缺，不少小伙伴也看到了其中的就业机遇。想要学习前端开发，自学太慢效率太低，那么Web前端开发在线培训班靠不靠谱？学了能就业吗?针对大家的担忧，小编就来仔细分析一下博学谷培训班的课程。
8174
2019-12-16 19:11:32
Node.js-Koa2框架实战项目需要学习哪些知识点？
Node.js-Koa2框架实战项目需要学习哪些知识点？Node.js-Koa2框架实战项涉及技术选型和知识点、技术方案设计、用户管理、用户设置、创建微博、个人主页、广场页、首页功能、at 和回复、at 提到我的、线上环境等内容。
8568
2019-10-15 14:27:44
零基础小白如何入门前端？
随着近些年前端行业的崛起，前端人才也越来越供不应求。不少人都看到这个行业的巨大发展前景，因此目前零基础开始学习前端的人也越来越多了。那么，零基础小白如何入门前端呢？为了让大家快速入门前端，本文将从前端市场分析、前端应用场景、前端学习路线和前端入门建议几方面讲解最全面的前端入门必备知识。如果你对前端感兴趣就接着看下去吧！
4336
2020-04-14 16:47:05
Web前端三大主流框架是什么？
前端框架对于前端开发的好处是显而易见的，比如减少代码中因失误产生的bug，还能大大节约时间和人力成本，缩短开发周期等等。目前，市面上Web前端三大主流框架分别指的是Angular、React和Vue，在Web前端开发中，它们平分秋色，各有优劣。下面我们一起来好好认识一下它们吧~
11264
2020-06-05 18:16:01
0基础前端开发需要学什么？
0基础前端开发需要学什么？零基础学员入门前端需要了解前端行业的发展趋势、学习前端的方法、前端学习路线详解以及前端案例展示等内容；有老师指导的情况下，可以结合学员自身情况制定前端学习路线，明确学习前端的路径、未来发展趋势。提前为学员打好基础，避免小白学员走弯路。
4858
2020-08-13 11:20:42
