解决方法
Quote from W3C
In a block formatting context,Boxes are laid out one after the other,vertically,beginning at the top of a containing block. The vertical distance between two sibling Boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block Boxes in a block formatting context collapse.
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 content area may shrink due to the floats).
