Clear float of BFC & amp; clear, bfc float

Clear float of BFC & clear, bfc float

In our daily Code life, we will more or less use floating layout, such as navigation layout, as shown in:

However, we often encounter parent element collapse and floating clearance issues during implementation. For example

<! DOCTYPE html>

The child element (green) in is not wrapped by the parent element (Pink Line), which is the collapse problem. The black div in should be under two green colors, but now it is like this, which is the problem caused by not clearing the floating.

Sorry, how can it be so bad to float this stuff ?!!

In fact, I don't blame others. The original design intention of float is not to use layout, but to wrap text, helpless, and used in layout.

The twisted melon is not sweet, but it also quench your thirst.

Just give the right remedy to its features, hahaha.

A floating box does not belong to a normal stream in the Document. When an element floats, it does not affect the layout of block-level boxes, but only the arrangement of inline boxes (usually text, the normal stream in the document will behave like the floating box does not exist. When the floating box height exceeds the include box, in this case, the contained box does not automatically extend to close the floating element (the "height collapse" phenomenon ). As the name suggests, it is just floating on a normal stream, just like a floating cloud, but only floating around. It is precisely because of this floating feature that, after the elements in the normal stream are floating, the height of the contained box is 0 (the height collapsed) because there are no other elements in the normal stream ).

Okay. Now that you have understood the key points, you can take the right medicine.

The conventional solution is to use clear to clear the floating and the collapse caused by floating.

<! DOCTYPE html> To run the code, see:

This is achieved, but it adds content to the page to achieve the effect, destroying the structure and no semantics.

Therefore, we introduce pseudo elements to solve such problems. PS: introduced the code of Master Nicolas Gallagher in the modified Code.

<! DOCTYPE html>

Aha, that's the case.

But,: after ?!! IE6, 7 Nima does not support it.

Yes. Let's try again to see how to optimize it.

Since IE6 and 7 have a hasLayout, this hasLayout is a child thing. When the hasLayout attribute value is false, the element size and position are controlled by the ancestor who recently owns the layout; if it is true, it will achieve the same effect as BFC. So we can use this to solve IE6 and 7's contempt for: after ..

Using zoom to trigger IE6 and 7 is a common practice, so we have a relatively reliable solution by combining zoom and after.

The Code is as follows:

/* Hack Method for IE6, 7 */. fix {* zoom: 1;}/* popular browser */. fix: after {content: ""; display: table; clear: both ;}

Modify the demo Code as follows:

<! DOCTYPE html>