读过

<<Css the missing manual>>
<<Css matstery>>

发现还是 w3c 官方的 spec 讲地比较透彻。

比如为什么下面这段 HTML 中，元素 b 的 left border 会和 元素 container 的 left border 贴在一起？

<div id="container">
  <div id="a" style="float:left">
    Hello
  </div>
  <div id="b">
    world
  </div>
</div>



但是只要给元素 b 加一个 overflow:hidden，它的 left border 会和元素 a 的right border 贴在一起了


答案： w3c 标准规定的。

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).


http://www.w3.org/TR/CSS21/cover.html#minitoc
--
FROM 114.249.209.*