打好基础：浮动是怎么回事？怎么实现等高布局？CSS怎么控制文字换行？

浏览数：22 / 时间：2015年06月09日

一、浮动是怎么回事？

参考技术文章：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>