浮层的原理与清除

1、为什么会产生浮层

 

首先我们看一下float这个属性，套用w3c标准，对该属性的定义如下：

 

 

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

 

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄（根据内容来计算其宽度，如果没有内容也没有设置该浮动层的宽度，则该浮动层在页面中是看不见的）。

 

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止

 

设置了该属性的left或right值后，该浮动元素（floats）就会被移出文档流。这就产生了一个问题：浮动元素所在父元素不会自动伸长以便闭合浮动元素。看下面的代码

 

 

<div id="outer">    
  <div id="inner"> <h2>A Column</h2> </div>    
  <h1>Main Content</h1>    
  <p>Lorem ipsum
</div>

      我们可以为“#inner”设定一个宽度值（比如说20%），但是由于div是块级元素，即使我们设定了宽度，其后面的内容也只能在下一行中显示，除非我们给它设定一个浮动属性（无论是向左浮动或者向右浮动）。那么此时会产生我们上面提到的问题了。

      如果“#inner”的宽度和高度都比“#outer”小，这不会有问题。

      但是，如果“#inner”的高度超过了“#outer”，那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后，它就会脱离文档流，无论其宽度和高度怎么变化都不会使“#outer”跟随变化。

 

      看下面代码：设置浮动层后，由于inner的高度超出了outer的高度，他会浮动起来，脱离文档流，而outer下面的div元素会根据outer的高度来定位自己的位置，这时outer没有自动变化高度，所以outer下面的元素就会显示在浮动层的右侧，在各主流浏览器都是这个效果。

 

 

       <div id="outer" style="border:1px solid #f2f2f2;">
		<div id="inner" style="float:left;height:300px;">
			<h2>A Column</h2>
		</div>
		<h1>Main Content</h1>
		<p>Lorem ipsum</p>
	</div>
	<div>
	有浮层显示的效果
	</div>

     如果我们在定义了浮动层影响父元素的内部加上清除浮动的方法后，页面就会正常显示，看下面代码

 

 

     <div id="outer" style="border:1px solid #f2f2f2;">
		<div id="inner" style="float:left;height:300px;">
			<h2>A Column</h2>
		</div>
		<h1>Main Content</h1>
		<p>Lorem ipsum</p>
		<div style="clear:both;"></div>
	</div>
	
	<div>
	有浮层显示的效果
	</div>

 

     在浏览器中再次预览效果，发现页面正常显示了，这里要说一点，就是浮动清除元素放到哪个位置，应该放到inner的下面（不一定紧挨着inner）。

 

2、 浏览器中可以自动完成闭合浮动元素的情况（即子元素设置了浮层，但父元素会自动撑开高度）

 

 

    2.1、标准浏览器中可以自动完成闭合浮动元素的方法，在标准浏览器中，这称之为Block-Formatting-Contexts（块格式化上下文）：

       a.浮动元素；

       b.拥有绝对定位属性的元素；

       c.设置inline-block元素；

       d.table-cell元素;

       e.设置了overflow的元素，比如：auto/hidden。

【注】CSS3中，将Block-formatting-contexts 叫做 flow root。对于触发方式也做了修改：The value of ‘position’ is neither ‘static’ nor ‘relative’；

 

       那么在IE/win中，就依靠那个“hasLayout”了，触发“layOut”的方法有：

       a.浮动元素

       b.绝对定位元素

       c.display:inline-block

       d.zoom：比如常见的设置zoom：1；

       e.width/height,比如设置height：1%的方法；

       f.overflow/overflow-x/overflow-y [IE7 新增]；

       g.max/min-width/height [IE7 新增]；

 

   这里简单的举一个例子，看以下代码

 

 

<div>浮动中套浮动的效果</div>

	<div style="border: 1px solid #f2f2f2;">
		<div style="float: right;">
			<div style="float: left; height: 100px; border: 1px solid #f2f2f2;">由于父元素也是浮层，所以会自动闭合浮动层的（即父元素自适应高度的）</div>
			<div>内容</div>
		</div>
		<div style="clear: both;"></div>
	</div>

 

  最里边的浮动层由于父元素设置了浮动层，所以会自动闭合的

 

3、清除浮动常见方法

 

    我们知道了产生浮动的原理并且各浏览器清除浮层的不同后，清除浮动就好办了。主要有以下几种方式

 

 

   （1）空标签法：

       这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear:both"的元素，强迫容器适应它的高度以便装下所有的float，并没限制使用什么样的标签，有用<br style=”clear:both”/>的，有用空<div style=”clear:both”></div>的;比如： 

 

 

<div> 
     <div style ="float:left; width:40%;">
         <p> Some content </p>
     </div> 
     <p> Text outside the float </p> 
     <div style ="clear:both;" ></div> 
</div>

 

 

（2）父元素使用overflow的方法：

       通过设置父元素overflow值设置为hidden或者auto；不过，在<=IE6中使用这个方法，还需要haslayout，还有，使用overflow=hidden的时候，一旦你有定位需求可能会因此而难以实现，使用这种方法前你应该至少确定：

       a.父元素的height是自适应的；

       b.浮动元素的宽度不大于父元素的宽度，即没有溢出需求；所以，这种方法也有它的局限性；

 

 

<div style ="overflow:hidden; width:100%;"> 
    <div style ="float:left;width:30%;" > 
    <p>the widths of the combined floats never exceed the width of the container</p>
   </div>
</div>

 （3）伪类:after

       这种方法应该说是目前应用最广泛的方法，它的优势：没有多余的标记添加到容器中；通过使用:after产生的content不能接受某些属性，包括'position','float',列表属性，表格属性，但是clear属性可以被接受。

       不过，不幸的是，IE不支持:after方法，但又幸运的是，回顾前面，如果IE在父容器拥有Width/Height等layout状态下，会完成自动闭合，称之为“auto-clearing”；那么，对于IE/win，我们使用设定zoom：1的方法的方法来实现和:after一样的效果.于是一个类似这样的样式出现了：

 

 

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{zoom:1;}

    上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。另外还有一种更简洁的方案：

 

（4）伪类:before和:after结合使用

 

 

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

     原理跟第三种是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。

     值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。