浮动

子元素浮动后脱离了标准文档流，它的布局也就不再遵循标准文档流的规则， 多个浮动元素在一起的时候就会随着窗口的变化而变化，也就失去了稳定的布局，而父元素还是会遵循标准文档流 的规则，从而产生冲突。

 

1.清除浮动

方法一：创建clearfix类，在浮动元素的父级添加这个类（触发BFC机制）

.clearfix:before,.clearfix:after{

　　content:"";

　　display:table;

}

.clearfix:after{

　　clear:both;

}

使用

<div class="clearfix">

　　<div style="float:left">11</div>

　　<div style="float:left">22</div>

</div>

 

方法二：隔墙法

　　.cl{

　　　　clear:both;

　　}

　　.h10{

　　　　height:10px;

　　}

 

　　外墙法：

　　在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
　　墙用自己的身体当做了间隙。内墙法好用，但是第一个div，还是没有高度。

　　<div style="float:left">11</div>

　　　　<div class="cl h10">22</div>

　　<div style="float:left">22</div>

 

　　内墙法：

　　内墙法的优点就是，不仅仅能够让后部分浮动的div不去追前部分的div了，并且能把父div撑出高度。这样，这个父div的背景、边框就能够通过内墙div的高度来撑开了。

　　<div style="float:left">11

　　　　<div class="cl h10">22</div>

　　</div>

　　<div style="float:left">22</div>

 

 

方法三：overflow:hidden

 

　　<div style="overflow:hidden">

　　　　<div style="float:left">11</div>

　　　　<div style="float:left">22</div>

　　</div>

　　这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
　　我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。

 

总结

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

一是有高度的父级能关住浮动，而实际工作中不能给父亲设置高度，父亲的高度是变化的，是子元素高度撑起来的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，方法一就是这么做的。