在线客服
扫描二维码
下载博学谷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前端必备：JavaScript基础知识梳理
Web前端必须掌握的三种技能：HTML/CSS/JavaScript。其中JavaScript相对有一定的难度，甚至部分企业专门设置的JavaScript开发工程师的岗位。今天和大家分享一下JavaScript部分基础知识。
10442
2019-06-25 18:31:26
Web前端开发在线课程怎么样？要学那些技术知识？
Web前端开发在线课程怎么样？要学那些技术知识？想从事前端开发，目前有三种途径，即自学、参加线下面授班、参加在线课程。自学对于个人的自控能力要求非常严格，面授班则需要脱产学习，相较之下越来越多的人选择参加Web前端开发在线课程。
10868
2019-07-29 17:44:51
前端与移动开发在线课程怎么样？有哪些优势？
前端与移动开发在线课程怎么样？有哪些优势？博学谷前端与移动开发在线课程是专门为零基础同学打造的就业课程。其教学模式既结合了线下教学的师生互动性，有融合了线上教学的便捷高效。下面让我们来看看前端与移动开发在线课程的具体优势。
7524
2019-08-29 13:02:07
Redis从入门到精通详解
众所周知，Redis是一款开源的数据库，它使用ANSI C语言编写、遵守BSD协议、支持网络，并且可基于内存也可持久化的日志型、Key-Value高性能。本文就来聊聊Redis，带大家从入门到精通。以下是Redis史上最全详解，一起来看看吧！
7385
2019-11-16 15:12:08
如何学习前端？前端学习路线总结
随着多屏互动和多端兼容友好的界面变得越来与重要，前端工程师也成为了热门的研发技术岗位之一。随着就业市场大环境的改变，一方面是前端人才的紧缺，另一方面是对前端求职者的要求增高，所以我们需要学的东西也不能仅仅只停留在基础层面。那么，我们应该如何学习前端呢？下面为大家总结了一条前端学习路线，大家可以参考一下。
7137
2020-03-04 18:08:35
