清除浮动

2021-01-07 本文已影响0人每日log

浮动是指的是css的属性float。对于设置了浮动的元素，在页面效果上可以通俗的理解为“这个元素漂起来了（在水上）”，位置发生变化，不按HTML代码中排列。

清除浮动本质是为了解决父级元素因为子元素浮动而引起内部高度为0的问题，清除浮动后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
常用清除浮动方法就是给父盒子加高。

01、给父盒子添加高

.fatherBox{
    height: 100px;
 }

缺点：子盒子高度可能不确定，此时就不能给父盒子限制高度。

02、clear:both

在浮动的盒子后面添加一个新标签，并设置css为clear:both

<div class="fatherBox">
    <div class="son1"></div>
    <div class="son2"></div>
    <div style="clear: both;"></div>
</div>

缺点：添加了无意义的标签。

03、父级添加overflow属性

.fatherBox{
   overflow：hiden;
 }
overflow可以为 hidden，auto， scroll。

缺点：比如hidden的时候，内容增多时候容易造成内容被隐藏，无法显示完全内容。

04、使用after伪元素清除浮动

给父盒子添加类名，clearfix并设置属性如下：

 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 }   
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
<div class="fatherBox clearfix">
</div>
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

05、使用双伪元素清除浮动

同上，给父盒子添加clearfix类名，设置属性如下：

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

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

原文：写移动端CSS一定要注意的三件事

1. 谈谈JS中的运算符：void的四大用法

2. 谈谈JS中的运算符：in和instanceof

3. 谈谈JS中的运算符：自增++ 自减--