Clear float impact and clear floating float impact

Clear float impact and clear floating float impact

Floating will cause the parent element to collapse:

Solution:

Parent element overflow: hidden,

Insert the child element clear at the end,

Why does parent element overflow: Den den solve the collapse problem?

From zhihuTaobaoxiangAnswer

Overflow: hidden indicates that the excess part must be cropped and hidden.

If the float element does not occupy the normal stream position, the inclusion block of the normal stream must be cropped and hidden Based on the Content height.

If the height is the default value auto, You can crop it without calculating the floating element height.

It is possible to cut off float, which is a common sense of anti-layout.

----------------------------- Split line -------------------------------------

If you understand the problem of BFC, you can solve it. Let's see what BFC says.

In the BFC layout specification, when calculating the BFC height,Floating elements are also involved in calculation.

Overflow: hidden creates BFC.

Why does inserting the child element clear at the end solve the collapse problem?

Let's take a look at what is clear about floating. This problem can also be solved.

From official documents:

If it is declared to be clear on the left or right side, the upper and outer border borders of the element will be on this side.Bottom margin of floating Element.

OK, a good foundation will go further.