前端开发CSS清除浮动的方法有哪些？

作者：码上未来CodingFuture 来源：码上未来CodingFuture 2022/11/11 10:10:03

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且...

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素（float为left或right），此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢？

一般使用clear属性清除浮动。但是要注意的是clear属性只能清除标记左右两侧浮动的影响，然而在网页开发时，经常会受到一些特殊的浮动影响，例如，对子标记设置浮动时，如果不对其父标记定义高度，则子标记的浮动会对父标记产生影响。使用clear属性并不能消除子标记浮动对父标记的影响。因此小编整理了三种清除浮动的方法： 1)使用空标记清除浮动在浮动标记之后添加空标记，并对该标记应用“clear: both”样式，可清除标记浮动所产生的影响，这个空标记可以是<div>。 2)使用 overflow属性清除浮动对标记应用 overflow:hidden”样式，也可以清除浮动对该标记的影响。这种方式弥补了空标记清除浮动的不足。需要注意的是，在使用“ overflow: hidden”样式清除浮动时，一定要将该样式写在被影响的标记中。 3)使用after伪元素清除浮动使用 after伪元素也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用 after伪元素清除浮动时需要注意以下两点： 1、必须为需要清除浮动的标记伪元素设置“height:0;”样式，否则该标记会比其实际高度高出若干像素。 2、必须在伪元素中设置 content属性，属性值可以为空，如“content:””;”。以上就是为大家分享的关于前端开发中CSS清除浮动的方法。前端技术相对后台编程更容易入门，而前端开发工程师职业发展以及就业薪资非常稳定。如果想要系统学习Web前端开发技能。可以直接通过码上未来官方公众号了解在线学习前端开发的课程。码上未来大连校区介绍码上未来始终秉承“立足精英时代，培养时代精英”的使命，以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于引领中国IT人才实践教学模式，努力打造高质量值得信赖的IT人才服务平台。

预约申请免费试学5天互联网全栈开发课程（含H5前端开发、Java微服务开发）！直接拨打即可预约申请免费试学！怕钱不够？可分期付款学费！怕没时间？就业班、业余班两种班型任你选择！怕学不会？教学采用全程面授高品质、高体验培养模式，特别重视学员实践能力的培养，根据个人学习计划提供视频、图文、答疑、一对一作业批改等服务，旨在让零基础学员轻松入门。担心就业？依托众多合作企业资源，提供就业保障和薪资保障服务，让学员毕业就能赢得高薪和名企。码上未来，成就你更好的未来！本文来源网络，如有侵权，私信小编删除！