在线客服
扫描二维码
下载博学谷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的面试题含答案
相关推荐 更多
2019年前端与移动开发培训就业方向多不多？
前端与移动开发是目前互联网中的热门就业方向。但是随着前端多元化的发展，企业对于人才的需求在不断增多的同时，对从业人员的技术水平也提升了要求。因此想通过简单的自学就找到高薪的前端工作不再想几年前那样容易。所以建议想同时前端与移动开发的朋友尽可能通过参加前端与移动开发培训完善并提升下自己的实力。那2019年前端与移动开发培训的就业方向多不多呢？
5813
2019-08-15 16:41:13
HTML5好学吗？其应用方向是什么？
HTML5是前端技术中非常重要的内容，尤其在微信小程序的爆发之后，HTML5技术成为前端工程师必备的技术。关于HTML5是否好学，这个并没有确定的答案，需要根据学习者对于新知识接受能力以及相关技术基础而决定的。但是如果与后台编程技术相比，HTML5难度要小一些，也相对更容易入门。
6308
2019-10-15 18:38:43
前端发展前景与就业市场如何？
互联网人才市场近几年一直处于火热的状态中，其中产品经理、UI设计、前端开发在每个互联网企业都是必须的岗位，然而后台开发相对语言种类多，企业根据不同定位会选择不同的后台开发语言。这里主要和大家分享一下前端开发的发展前景与就业市场！
6687
2019-11-28 18:20:27
全栈开发项目教程 带你走向全栈开发之路
全栈开发工程师是目前各大企业和公司需要的复合型人才，想要成为一名具备全局思维的全栈工程师，需要掌握前后端开发等多项技能。本文将向大家介绍全栈开发项目教程，带领大家走向全栈开发之路。该教程使用了Vue技术栈、NuxtJS、Koa2、MongoDB技术，通过开发全栈电商平台的实战案例，帮助大家快速牢固掌握市场最前沿的全栈技术。下面我们来一起看看具体的教程内容。
5415
2019-12-03 15:18:05
前端CSS样式布局学习什么？
前端CSS样式布局学什么？需要了解CSS布局的概念以及实现布局的注意事项，什么是CSS布局，主流布局的分类及方案，扩展工作中的经验等相关知识点。
6339
2020-02-04 14:38:00
