文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出，又遇到了一些小问题，先上图：

关于文本溢出推荐：http://www.cnblogs.com/yzg1/p/5089534.html

从里面学习到单行文本和多行文本溢出， overflow:hidden;text-overflow: ellipsis是基本。然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ，包括设置盒子的伸缩方向和显示的行数。

用div内嵌div做一个小测试：发现对子元素，margin-left有效但是margin-top是无效的，问题的根本原因呢，还是对margin的特性没有了解清楚。w3school（http://www.w3school.com.cn/css/css_margin_collapsing.asp）外边距合并这一章讲的很清晰，实际上就是父元素和子元素在垂直方向上的外边距进行了合并，所以只显示出20px，而水平方向上不会，故显示40px。注释当中还有一句重要的话：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。此注释就为解决这个问题提供了思路。（http://www.nowamagic.net/librarys/veda/detail/1608）也有助于清晰的了解margin的一些特性，作者还分析了IE浏览器下关于margin可能出现的bug。

效果如下：

问题的解决：（http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html）给出了几种方法，其中最简单的就是在父元素中设置：overflow：hidden，果然问题就解决了，但是我并不明白问什么，作者给出原因：盒子没有获得 haslayout  造成 margin-top无效。再继续学习的过程中接触到了一个新的名词BFC（Block Formatting Content），BFC决定了元素如何对内容进行定位，集中触发方式：

1.float不为none；2.overflow不为visible；

3.display:(table-cell\table-caption\inline-block)；4、position:(任何值除了static\relative)

BFC和hasLayout的作用：浮动元素和常规元素的重叠问题；解决相邻元素margin边距重叠问题（http://www.cnblogs.com/ILYljhl/p/3169419.html）

所以margin的外边距合并清除的问题就这样解决啦，至于BFC和hasLayout还要继续学习~