About clearing floating

The evening originally wanted to go to the Apple official website to look at the new product, by the way look at the tall video, after entering, habitually opened the review element, and then began to study the Apple code

See a list of pictures with this paragraph:

This is the following three lines of code:

. Promos Ul:after { clear: both; }. Promos Ul:before,. Promos Ul:after {　　content: "; display: table; }

Bootstrap is the same kind of notation.

Obviously, it is used to clear the float, and the small partner chatted about a few interesting places.

The most said is the display:table;

Using pseudo-elements to generate BFC, but also to avoid the ie,6,7 margin overlap problem.

Look at the following explanation:

We should all be able to understand, not much to explain.

After reading this, I looked up some information, written in the Evernote, explaining why I used table,

(Original link: http://www.nenew.net/use-clearfix-to-clear-float-on-element.html)

The contents are as follows:

Adding a div package with the Clearfix attribute to the outer layer of a float property element guarantees the height of the outer Div, which clears the question of "floating elements out of the flow of the document and the div that surrounds the picture and text does not occupy space".

See "Chat css about clearfix– clear floating" http://www.indievox.com/e2ghost/post/50238 's article gives a clearer analysis:

2. There are several ways to make block formatting context:
6. The value of float is not none.
8. The value of the overflow is not visible.
10. The value of display is Table-cell, table-caption, any of the inline-block.
12. The value of position is not relative and static.
16. It is clear that float and position are not suitable for our needs. That can only be selected from the overflow or display.
18. Because it is applied. Clearfix and. Menu menus are highly likely to be multilevel, so overflow:hidden or Overflow:auto do not meet the requirements
20. (The drop-down menu is hidden or scrolled), so you can only start with display.
24. We can set the display value of the. Clearfix to Table-cell, Table-caption, any of the Inline-block
26. But Display:inline-block will produce extra blanks, so it's also ruled out.
28. The remaining only Table-cell, table-caption, in order to ensure compatibility can be used display:table to make. Clearfix form a block formatting Context
30. Because display:table will produce some anonymous boxes, one of these anonymous boxes (display value of Table-cell) forms the block formatting Context.
32. So our new. Clearfix will close the float of the inner element.

So use display:table.

In fact, there are other ways, I added Overflow:auto on the UL, and then removed: after: The clear and Display properties, the performance is the same. Because overflow can also produce BFC, about BFC, to recommend a website to learn, I understand it is not very deep, do not caught dead.

The links are as follows:

http://div.io/topic/834?page=1#3261

We recommend an article, and this is the same: http://blog.coderyang.com/css/2015/09/05/clearfix.html

CSS is broad and profound, it is not easy to learn.

The above text, but also very rough, my understanding is very shallow, welcome guidance, Welcome to discuss.

About clearing floating