clear-fix清除浮动的两种写法

本文介绍了三种不同的清除浮动的方法,包括 clearfix 技巧的不同实现方式及其在 Bootstrap 中的应用。通过 CSS 的伪元素特性来确保浮动元素不会影响页面布局的整体表现。

  

1. [代码]clearfix 清除浮动     
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
 
.clearfix {
zoom: 1;
}
2. [代码]clearfix的另一种写法     

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
  
.clearfix {
    display: inline-block;
}
  
html[xmlns] .clearfix {
    display: block;
}
  
* html .clearfix {
    height: 1%;
}

3.贴上bootstrap里面的clearfix的写法
.clearfix {
  zoom: 1;
}
.clearfix:before,.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
 clear: both;
}

  

 

 

转载于:https://www.cnblogs.com/937522zy/p/6650708.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值