海安零距离 海安论坛 海安新闻 海安

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1884|回复: 0

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

[复制链接]

6234

主题

6234

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
18718
发表于 2019-12-26 17:54 | 显示全部楼层 |阅读模式
在前端开发过程中,非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清楚浮动的方法。?前端技能相对背景编程更轻易入门,而前端开发工程师职业发展以及就业薪资非常稳固。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|深圳论坛-深圳人的网上家园  

GMT+8, 2020-10-27 17:45 , Processed in 0.103077 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表