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

作者:BOM前端开发 更新于： 2020-03-23 20:55:28

　　在互联网的演化进程中，网页制作是web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

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

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

　　一般使用clear属性清除浮动。但是要注意的是clear属性只能清除标记左右两侧浮动的影响，然而在网页开发时，经常会受到一些特殊的浮动影响，例如，对子标记设置浮动时，如果不对其父标记定义高度，则子标记的浮动会对父标记产生影响。使用clear属性并不能消除子标记浮动对父标记的影响。因此小编整理了三种清除浮动的方法：

　　1)使用空标记清除浮动

　　在浮动标记之后添加空标记，并对该标记应用“clear:both”样式，可清除标记浮动所产生的影响，这个空标记可以是、

、

　　2)使用overflow属性清除浮动

　　对标记应用overflow:hidden”样式，也可以清除浮动对该标记的影响。这种方式弥补了空标记清除浮动的不足。

　　需要注意的是，在使用“overflow:hidden”样式清除浮动时，一定要将该样式写在被影响的标记中。

　　3)使用after伪对象清除浮动

　　使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时需要注意以下两点：1）必须为需要清除浮动的标记伪对象设置“height:0;”样式，否则该标记会比其实际高度高出若干像素。2）必须在伪对象中设置content属性，属性值可以为空，如“content:””;”。

　　以上就是为大家分享的关于前端开发中CSS清楚浮动的方法。?前端技术相对后台编程更容易入门，而前端开发工程师职业发展以及就业薪资非常稳定。

　　前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及Javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。