Text overflow, vertical margin merge, BFC, haslayout

Learning text overflow Today, and encountered some small problems, first:

About text Overflow recommendation: http://www.cnblogs.com/yzg1/p/5089534.html

Learning from the inside to single-line text and multiline text overflow, overflow:hidden;text-overflow:ellipsis is basic. The elastic telescopic box-webkit-box is then used to control the overflow of multiple lines of text, including setting the box's scaling direction and the number of rows displayed.

Use div embedded Div To do a small test: Find the child element, margin-left valid but Margin-top is invalid, the root cause of the problem, or the characteristics of the margin is not clear. W3school (Http://www.w3school.com.cn/css/css_margin_ collapsing.asp) The outer margin merge chapter is very clear, in fact, the parent element and the child element in the vertical direction of the outer margin is merged, so only show 20px, and the horizontal direction will not, so display 40px. Another important word in the note is that only the vertical margins of the block box in the normal document stream will have a margin merge. Margins between inline boxes, floating boxes, or absolute positioning are not merged. This comment provides an idea for solving this problem. (http://www.nowamagic.net/librarys/veda/detail/1608) also helps to clearly understand some of the features of margin, and the author also analyzes the possible bug in the IE browser about margin.

The effect is as follows:

Problem Resolution: (http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html) gives several methods, the simplest of which is set in the parent element:Overflow:hidden, The problem is solved, but I do not understand what to ask, the author gives reasons: The box did not get haslayout caused margin-top invalid. Continue to learn the process of contact with a new noun BFC (Block formatting content), BFC determines how the elements to locate the content, centralized trigger mode:

1.float is not a none;2. The overflow is not visible;

3.Display:(table-cell\table-caption\inline-block); 4,position:(any value except static\relative)

The role of BFC and Haslayout: overlapping of floating and conventional elements; resolving adjacent element margin overlap problem (http://www.cnblogs.com/ILYljhl/p/3169419.html)

So the margin of the merger clearance of the problem is resolved, as for BFC and Haslayout to continue to learn ~

Text overflow, vertical margin merge, BFC, haslayout