ORIGIN

CSS 高度塌陷 Height crash

2020-04-09

Environment: When you set float to an element, and it’s parent’s width or height follows the element’s width or height. Then, the parent will lose its width or height and it’s called height crash. Here are some solutions.

Fixed height

Set the height of the parent to a fixed number. This will work but, when the child element changed, the parent element won’t change. So this solutions works but a good one.

BFC

According to the Standard of W3C, every element in the page has a hidden attribute called BFC, short for Block Formatting Context. This attribute is off by default.

Attributes when BFS is on

Vertical margin of parent item won’t overlap with child item
BFC-on element won’t be covered by float element
BFC-on element can contain float child element

How to open BFC

Set float to parent item

This way will make the parent item lose its width, and following item will still move
Set absolute position for parent item

The same as the first one
Set inline-block for item

Also lose width
Set the value of overflow to a non-visible value

This works!

Overflow

1 2	overflow: hidden; overflow: auto;

If there is a relative positioned item in the parent element and the item is out of the range, you won’t be able to see it.

In IE6 or lower, the browser doesn’t support BFC, it has an attribute call hasLayout, familiar to BFC.

Zoom (IE6)

1 2	/* IE6 */ zoom: 1;

Zoom means enlarge the element. Value 1 means the element is the same size as before.

Use this way to enable hasLayout.

Set width

Set width to a certain value for the parent element.

Blank element

Add a blank div at the bottom of the parent element. Clear float of the blank div.

Since this element is not float, the parent height will be stretched.

Basically has no side effect.

	<style>
    .clear {
        clear: both;
    }
</style>
<div class="box1">
    <div class="box2"></div>
    <div class="clear"></div>
</div>

However, this will add redundant struct in page. So this is not recommended.

Add a Pseudo Class :after

.clearfix:after {
    /* add content */
    content: "";
    /* change into a block element */
    display: block;
    /* clear float on both side */
    clear: both;
}
<div class="box1 clearfix">
    <div class="box2"></div>
</div>