【 清除浮动总结】

清除浮动总结

一、为什么需要清除浮动?
由于浮动元素不再占有原来的文档流的位置，所以会对后面的元素排版产生影响

• 1.父级没高度
• 2.子盒子浮动了
• 3.影响下面布局，我们就应该清除浮动

二、清除浮动的本质：

• 清除浮动本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动盒子自动检测盒子

三、清除浮动的方法：
策略：闭合浮动
1.方式一：额外标签法即隔墙法
步骤：

• 在浮动元素末尾添加一个新的盒子即一个空标签
• 为盒子添加其clear属性

其他写法：

<div style="clear:both"></div>

优点：通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差
注意：这个新的标签必须是块级元素，不能是行内元素
2.方式二：父级添加overflow
给浮动盒子的父元素添加overflow属性，将其属性值设置为：hidden,auto或scroll
3.方式三：after伪元素法
：after方式是额外标签法的升级版，也是给父元素添加
代码如下：

.clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visbility:hidden;
   }
.clearfix {
      *zoom:1;
   }

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
4.方式四：双伪元素清除浮动
双伪元素清除浮动是给父盒子添加属性
代码如下：

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

优点：代码更加简洁
缺点：照顾低版本浏览器