Chapter 13 浮动布局

清除浮动的方法

当读懂元素比容器本身更高的时候， 就会溢出它的外围div， 那么溢出的元素看起来就不像是容器的一部分了。
http://www.complexspiral.com/publications/containing-floats/

• 在外围div的底部添加一个清除元素 只要添加一个表情， 比如一个换行或者水平规则，如包含浮动元素的div中的最后一项。然后利用clear属性强制该标签浮动到浮动元素下方。 这种技巧是使外围div扩大露出其背景和边框。
  缺点是它需要增加额外的html代码

...

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
}

...

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上加背景

    
Sidebar 
    
Content testsetsaadsf


.wrapper {
    background: url(image/col_bg.gif) repeat-y left top;
}

3 列的情况

    
Sidebar 
    
Content testsetsaadsf


.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;