简述clear和clearfix

来源：互联网发布：淘宝店被投诉知识产权编辑：程序博客网时间：2024/05/29 17:58

clearfix 主要是用在浮动层的父层，放在前面；
clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。
举个例子（部分代码）

   <body>    <h2>用 clear 清除浮动</h2>    <div class="demo">        <div class="fl item1"></div>        <div class="fl item2"></div>        <div class="clear"></div>         //clear放在最后    </div>    <h2>用 clearfix 清除浮动</h2>    <div class="clearfix demo">        //主要是用在父层        <div class="fl item1"></div>        <div class="fl item2"></div>    </div></body>

1,clearfix:before
有时候我们会见到这种写法：

.clearfix:before{}

其实只使用clearfix:after就可以达到清除浮动的效果，但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，具体造成这种原因。所以为了让浏览器兼容这个clearfix的清除浮动，在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题，特别是clearfix:after清除浮动，完全就是clear:both的一种变身，但在IE6-7下面，我们只要触发子hasLayout的元素就可以清除浮动了，常见的就是zoom:1。

2,重构.clearfix
在遭遇到上面的错误之后，分析一下除了.clearfix:after这种方式之外还有没有别的方法清除元素内部的浮动。答案是有的，在白话Block Formatting Contexts这篇文章中提到过构成Block Formatting Context的元素可以清除内部元素的浮动。那么只要使.clearfix形成Block Formatting Context就好了。构成Block Formatting Context的方法有下面几种：
● float的值不为none。
● overflow的值不为visible。
● display的值为table-cell, table-caption, inline-block中的任何一个。
● position的值不为relative和static。
很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个，但是display: inline-block会产生多余空白，所以也排除掉。剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context，因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。这样我们新的.clearfix就会闭合内部元素的浮动。下面是重构之后的.clearfix。
.clearfix {
zoom: 1;
display: table;
width: 100%;
}
清除浮动的方法很多，浮动的清除也很重要，掌握熟练一点很有必要。

阅读全文

0 0