浮动：无;格式化会影响div的背景颜色吗？

Question

我正在尝试了解float和clear的行为。出于这个原因，我创建了一个小例子(avaiable on 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/

然后你的方框将显示为A C D B。

至于理解发生了什么：this is an excellent article。