CSS浮动

博客介绍了CSS浮动相关知识。浮动元素有顺序贴靠特性,若空间不足会寻找前一个兄弟元素。浮动元素脱离标准文档流,不区分块级、行内元素,都能设置宽高。同时还给出了四种清除浮动的方法,避免对后续元素产生影响。

浮动

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠,如果没有足够的空间,则会寻找前一个兄弟元素如下图所示:3号盒子会掉到2号盒子的下面

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档,一律能够设置宽度和高度,即使他是a标签或span标签

清除浮动

清除浮动: 浮动一定要封闭到一个盒子中,否则会对页面后续元素产生影响
方法一: 父元素添加 overflow: hidden
方法二:给后面的父盒子设置 clear: both 属性 – 会导致margin失效
方法三: 使用:after 伪元素 给盒子添加最后一个子元素,并给 ::after设置content:";clear:
both;displa:block;
方法四: 在两个父盒子之间隔一个携带clear: both的空盒子

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值