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

Posted 2020-09-07 Je vous

  

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;
}