在线客服
扫描二维码
下载博学谷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的面试题含答案
相关推荐 更多
前端开发和后端开发都是干什么的？有哪些区别？
前端开发和后端开发都是干什么的？有哪些区别？通俗地讲，前端干的工作是用户可以直接看得见的，而后端开发的工作主要在服务端，用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别，但是他们的工作都是相辅相成的，都是为了更好的用户体验。
10223
2019-09-29 10:19:17
Web前端开发语言有哪些？各自有什么优势？
Web前端开发语言有哪些？各自有哪些优势？就目前Web前端开发可能涉及的语言来讲，有PHP语言、JavaScript、Ruby、HTML5、Java和Python。当然并不是说以上这些语言前端开发工程师都必须掌握，其实只选择一两门熟练掌握即可。下面我们来看看这些Web前端开发语言的具体介绍和自身的优势。
16109
2020-01-12 16:30:51
Web前端开发常用工具推荐
随着互联网发展的愈加深入，前端作为公司的门面，人才需求会越来越大。正因如此，才吸引了那么多的人投身前端行业。对于刚入门前端的新手和一些资深的前端开发人员来讲，掌握一些常用的Web前端开发工具是十分有必要的。好用的工具可以帮助大家更好的完成工作，并且提高开发的效率。下面我就来推荐一些Web前端开发常用工具。
7453
2020-03-26 20:33:32
前端开发者怎样提高自己的竞争力？
近几年，小程序和Flutter、Weex 等跨平台开发工具的出现，以及React、Vue 和 Angular 等框架的完善，都展示出同一个道理：前端发展日益迅猛，其社区的活跃度和标准的更新速度，也早已远超我们的想象。前端开发者怎样提高自己的竞争力？这是每个前端从业者都应该思考的问题。
6663
2020-06-29 15:36:27
Web前端进阶要学什么？
近几年，Web前端行业的人才需求一直持上升趋势，而前端开发也变的越来越复杂，仅仅掌握HTML、CSS和Javascript ，已经不能满足目前各大企业的用人需要了。那么Web前端进阶要学什么呢？简单来讲，HTML5+CSS3是Web前端开发关键性技术，可以应对现阶段与未来网页制作的高标准。
6673
2020-07-03 09:50:11
