标签：
一、浮动是怎么回事？
参考技术文章：CSS浮动的深入研究，以下为读书笔记。
我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是“文字环绕图片”，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在。
二、怎么实现等高布局？
法一：双列有边框布局
tips: 用wrapper的border作为sidebar的背景,用wrapper的body作为content的背景
法二：多列等高布局
tips: 使用负margin-bottom和正padding-bottom对冲，overflow：hidden来实现等高布局
short: 需要利用绝对定位额外添加底部边框
#wrapper{ width: 1024px; height: 100%; position: relative; background: yellow; overflow: hidden; } #sidebar{ width: 224px; float: left; background: green; } #mainContent{ width:800px; background: pink; margin-left: 224px; } .col{ padding-bottom: 9999px; margin-bottom: -9999px; } .line1{ position:absolute; bottom: 0; width: 224px; height: 1px; background-color: black; } .line2{ position:absolute; bottom: 0; width: 800px; height: 1px; background-color: black; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多列布局</title> </head> <body> <div id="wrapper"> <div id="sidebar" class="col">...<div class="line1"></div></div> <div id="mainContent" class="col">...<div class="line2"></div></div>
</div> </body> </html>
打好基础：浮动是怎么回事？怎么实现等高布局？CSS怎么控制文字换行？
标签：
原文地址：http://www.cnblogs.com/timl525/p/4430342.html
