CSS布局遇到的问题小结

clear属性的作用

　指定某个元素的一侧不能出现浮动元素。它是通过为这个元素在上边距之外增加空间，从而使得这个元素的顶部和浮动元素的底部对齐。这里作用的仅仅是同一个bfc下的浮动元素。

　This property can clear an element only from floated boxes within the same block formatting context. It doesn’t clear the element from floated child boxes within the element itself.

　The clearance is achieved by adding space above the top margin of the element, if necessary, until the top of the element’s border edge is below the bottom edge of any boxes floated in the specified direction or directions.

块级上下文的四周是不能和同一个上下文中的浮动元素重叠的

块级格式化上下文会被里面的浮动元素撑开

Margin collapsing的表现

1. 两个相邻的元素：垂直margin重叠
2. 父元素和第一个/最后一个子元素：如果父元素没有border,padding,inline-content,height,max/min-height的话，子元素的margin会到父元素之外，也就是不能撑开父元素的高度
3. 容器内容为空，则它的margin-top和margin-bottom会重叠

 

inline-block 4px空白

这个真是坑啊，真不知道为什么现在浏览器还保留这种坑

具体内容见：http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements

参考资料

1. http://www.w3.org/TR/CSS21/visuren.html
2. https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
3. http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
4. http://swordair.com/css-positioning-schemes-normal-flow/