css浮动的特性及清除方法

本文详细解析了CSS中浮动的四个关键特性,包括其如何脱离文档流、默认排列方式、文字环绕行为及对父元素高度的影响。同时,介绍了五种有效的清除浮动方法,帮助解决布局中的常见问题。

浮动的特性:

1.脱离文档流,不占位置,可以设置宽高

2.默认排列成一行,遇到边界自动换行

3.文字会绕着浮动走

4.当元素设置浮动而父元素没有设置宽高时,高度会塌陷为0

清除浮动:

1.给父元素添加高度

2.给需要清除浮动的元素添加clear:both,会造成margin失效

3.在浮动元素后面创建一个空白div并添加clear:both

4.父元素添加overflow:hidden

5.父级元素添加伪类:after{content:' ';display:block;clear:both;}

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值