The solution to the height collapse problem

Today, let's take a look at a very common problem, which is the height collapse problem. I believe that many friends will encounter the height collapse problem when laying out, so today we will see how to solve it.

Height collapse

We generally do not set the height of the parent element when we set it. We usually fill it with content so that the parent element is stretched by the child element.Then there is a problem at this time. If the child element floats, the width of the parent element will collapse.In this way, our page will be cluttered, which is what we generally call the height collapse problem.

Solution for height collapse

One, set a height to the parent element

This can give the parent a height so that it won't collapse, but it's highly discouraged.

Second, enable BFC (Block Formatting Context)

When the BFC is enabled for the element, the element will become an independent area and will not affect the outside elements in the layout.

We can understand BFC as a closed big box, which can hold a lot of messy things, which does not affect the things outside.So the same element will not affect the outside elements after turning on the BFC.

Three, the third solution of height collapse (perfect)

Use the clear attribute

Add a blank div at the end of the collapsed parent element. Since this div is not floating, use the height that can stretch the parent element, and then clear and float the blank div.Not necessarily a div, other block elements can be

Basically no side effects

As shown below

.box3{clear: left;}

Fourth, the fourth solution of height collapse (perfect)

This method is based on the third method.

It is to use the pseudo-class ::after

As shown below

.box1::after{content: '';display: block;clear: both;}