float你真的懂了吗

什么是CSS浮动？引用W3School中的解释：

1 浮动的框可以向左或者向右移动，知道外边缘碰到包含框或者其他浮动框的边框

2 浮动框不在普通的文档流中，所以文档普通流中的框块表现的就像浮动框不存在一样

我们看一个栗子，PLUNKER

现在我们为div1加上浮动样式 float = right

可以看到div2顶替了div1原来的位置。

这时如果我们把div浮动到右边来，div1 和div2之间会发生什么呢？

试一试

可以看到div1 完全覆盖了div2. 这时由于div2是浮动框，它脱离了普通的文档流。

CSS最初为什么需要float这个样式呢？ 最初是为了实现文字环绕图像这样的布局，看一个栗子，PLUNKER

我们将div设置为float=left。就做成了这种文字环绕图片的布局。这个由于浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

如果想阻止行框被缩短，需要使用clear属性。

那么float+clear到底有什么实际用处呢？还是先看一个栗子吧 我们做一个水平定义列表 PLUNKER

一步步来，先做一个最基础的定义列表,效果就是这样了：

分析分析差别，标题需要加粗，右对齐，好像还有一定长度。

所以，加入CSS

dl {
  margin-top:0;
}

dd,
dt {
  margin-left:0;
}

dt {
  font-weight:bold;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align:right;
}

看看效果：

恩，感觉不大像。不过如果我们可以给标题加上float的话，似乎。。

dl {
  margin-top:0;
}

dd {
  margin-left:140px;
}

dt {
  margin-left:0;
  font-weight:bold;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align:right;
  float:left;
}

效果如下

哈哈 效果不就有了嘛。

其实这个效果就是bootstrap3中的水平列表的一个简单实现。所以说bootstrap也是挺简单的嘛。

不过一切都离不开细节。对比一下我们的实现和bootstrap，你会发现bootstrap多了一个设置

clear: left;

为什么要设置这个呢？

如果我们删除第一个标题的内容：

看看，乱了吧。

试着加上clear:left

此时又恢复了正常的格式。

所以说我们要多读读源代码，既要有整体把握，也得注重细节。