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

在前端开发过程当中，非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清楚浮动的方法。?前端技术相对后台编程更容易入门，而前端开发工程师职业发展以及就业薪资很是稳定。