CSS学习之Layouts方法float - CSS: The Missing Manual

网页有两种布局形式：固态布局（fixed width）和液态布局（liquid）。
固态布局：设计者可以很好的控制网页外观，但不能适配不同分辨率的屏幕显示。
液态布局

使用float进行液态布局的要点

• 浮动元素的html标签一定要位于包围浮动元素的元素标签前面。
• 总是应该为浮动元素设置width，可以是px em也可以是百分比。
• 为主栏目设置浮动栏目一边的大于等于浮动栏宽度的margin，使得就算内容栏超出浮动栏高度也不会包围到浮动栏下面。例：
  .sidebar{
float: left;
width: 25%
}
.main {
margin-left: 27%
}
• 没有必要为内容栏设定宽度
• 可以有多个同一边的浮动栏，它们会根据顺序依次排列，但是要注意如果它们的宽度和超过父元素可容纳的宽度，那么最后一个浮动栏会跑到下一行（即前面的浮动栏的下面）
• 如果在一个不浮动的div中，放了一个或多个浮动元素，如果浮动元素的高度大于div中内容的高度，那么浮动元素不会撑大div而是溢出div。解决方案：
  
  1. 在div里面的最后增加一个元素（例如<br>)，并为元素增加属性clear: both;，就可以强制div变大来容纳内容。
  2. 可以将父div也变为浮动元素，浮动元素会撑大自己来包围里面所有的浮动元素。可以将父div之后的元素设置clear: both;来忽略div的浮动效果。
  3. 为父div使用overflow: hidder;，这会逼迫父元素去扩大来容纳里面所有的浮动元素。

直接对container设置css来分栏

• 需要做一定的浏览器兼容。下为基本示例：
  {
column-count: 3;
column-gap: 1em;
column-rule: 1px dotted black;
}