您好,欢迎访问唐山现代电脑培训学校官网!

186 3153 9995

全国咨询热线

您现在所在位置: 主页 > 行业动态 > UI设计

前端开发培训中CSS清除浮动的方法有哪些

更新时间:2023-03-14

01.jpg

    常用的CSS清除浮动的方法为使用clear属性清除浮动:使用空标记清除浮动、使用overflow属性清除浮动、使用after伪元素清除浮动。如果想具体了解前端开发CSS清除浮动的方法,那不妨接着往下看吧!

    前端开发CSS清除浮动的方法

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动溢出。

    为了方式这个现象的发生,就需要对CSS样式进行处理,而这个过程就叫做CSS清除浮动。

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

    1)使用空标记清除浮动

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

    2)使用overflow属性清除浮动

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

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

    3)使用after伪元素清除浮动

    使用after伪元素也可以清除浮动,但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪元素清除浮动时需要注意以下两点:

    ①必须为需要清除浮动的标记伪元素设置“height:0;”样式,否则该标记会比其实际高度高出若干像素。

    ②必须在伪元素中设置content属性,属性值可以为空,如“content:””;”。

    前端技术相对后台编程更容易入门,而前端开发工程师职业发展以及就业薪资非常稳定。如果想要系统学习Web前端开发技能。可以直接通过码上未来官网了解在线学习前端+移动开发的课程。

在线客服

ONLINE SERVICE

联系电话

186 3153 9995

返回顶部
冀公网安备13020302001222