css之元素浮动

  什么时候用浮动——块级元素一行显示就使用浮动

  浮动的特点——让元素脱标不占位置

  什么时候清除浮动——父元素没有设置高度;父元素中所有的子元素都设置浮动

 

清除浮动的方法(掌握):

1.额外标签清除浮动

  步骤:(1)在浮动元素后直接添加一个空div标签;(2)选中该div标签设置属性clear: both;

2.单伪元素清除浮动[推荐使用]

.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
/* 将该元素隐藏 */
visibility: hidden;
}
.clearfix {
/* 兼容IE写法 */
zoom: 1;
}

3.使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}

.clearfix{
     *zoom: 1;
}

4.给父元素设置overflow: hidden;

  注意:如果使用overflow: hidden;清除浮动的时候,必须保证父元素中没有定位超出父元素的的元素

5.对父级设置适合CSS高度

 

转载于:https://www.cnblogs.com/belongs-to-qinghua/p/11212324.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值