css - 浮动：无；格式会影响 div 的背景颜色吗？

Question

我试图理解floatand的行为clear。出于这个原因，我创建了一个小示例（可在 jsfiddle 上获得）进行实验：

HTML：

<div class="left">A</div>
<div class="custom">B</div>
<div class="left">C</div>
<div class="left">D</div>​

CSS：

div {
    background-color: blue;
    color: red;
    width: 100px;
    height: 100px;
    margin: 3px;
}

.left {
    float: left;
}

.custom {
    float: none;
}​

首先，我不明白为什么background-color: blue;B 的指令似乎丢失了。

其次，我不清楚为什么删除margin: 3px;语句会导致：

提前感谢您的帮助或链接。

Answer 1

B 的指令并没有丢失——只是它周围的浮动元素将文本推到了 div 之外。去掉浮动元素的背景颜色，你可以看得更清楚一些：

http://jsfiddle.net/faq9h/3/

当您删除边距时（如第二张图片中所示），您实际看到的是 C 的背景从 B 文本下方显示出来。

解决此问题的一种快速方法是添加display: inline-block到非浮动元素：

http://jsfiddle.net/faq9h/4/

然后您的框将显示为 ACD B。

至于了解发生了什么：这是一篇很棒的文章。