清除浮动的方法
当读懂元素比容器本身更高的时候， 就会溢出它的外围div， 那么溢出的元素看起来就不像是容器的一部分了。
http://www.complexspiral.com/publications/containing-floats/
-
在外围div的底部添加一个清除元素 只要添加一个表情， 比如一个换行或者水平规则，如包含浮动元素的div中的最后一项。然后利用clear属性强制该标签浮动到浮动元素下方。 这种技巧是使外围div扩大露出其背景和边框。
缺点是它需要增加额外的html代码
...
<br class="clear"/>
</div>
br.clear { clear: both; }
浮动外围元素 一种更简单的方法是直接让包含浮动元素的div也浮动， 浮动的容器div会扩大，知道完全包含它里面的所有浮动元素。
如果选择这种方法，一定要在浮动容器后面的任何元素中添加一个clear属性，确保浮动元素落到容器的下方利用overflow：hidden。 在外围div的样式中添加 overflow：hidden。 它会强制外围模块扩大到包含浮动元素。 但如果容器中有任何绝对定位到元素，它们很可能会显示不出来。
使用Micro Clear Fix 只要在包含浮动元素的div标签中添加一些样式和类名即可。
.clear:after {
content: " ";
display: table;
clear: both;
}
.clear {
zoom:1
}
<div class='clear' >
...
</div>
zoom 只有IE支持，它不是有效的css，会通不过w3c验证(可以把它放到外部css中)， 但是他能出发IE6 和IE6中的布局
多列排列
https://www.w3.org/TR/css3-multicol/
http://dev.opera.com/articles/view/css3-multi-column-layout
.multicol {
column-count: 3;
column-gap: 1em;
column-rule: 1px dotted black;
}
让sidebar 撑到底（当它比较短的时候）
http://css-tricks.com/fluid-width-equal-height-columns
http://www.w3.org/TR/css3-flexbox
http://www.w3.org/TR/css3-grid-layout
- 在父层div上加背景
<div class="wrapper">
<div class="sidebar">Sidebar </div>
<div class="content">Content testsetsaadsf</div>
</div>
.wrapper {
background: url(image/col_bg.gif) repeat-y left top;
}
3 列的情况
<div class="wrapper1">
<div class="wrapper2">
<div class='sidebar'>Sidebar </div>
<div class='content'>Content testsetsaadsf</div>
</div>
</div>
.wrapper1 {
background: url(image/col_bg.gif) repeat-y left top;
}
.wrapper2 {
background: url(image/col_bg.gif) repeat-y right top;
}
防止浮动元素下落
当父类元素没有足够空间容纳所有的列，元素就会下滑 (float drop)
解决办法：
box-sizing: content-box | padding-box | border-box;
