What is the meaning of the height collapse of the parent element in CSS and how to solve it? (Attached code)

What this article brings to you is about the height of the parent element in CSS, what is the meaning of the collapse, how to solve? , there is a certain reference value, the need for friends can refer to, I hope you have some help.

The first thing to answer is what is the parent element height collapse:

In the document flow, the height of the parent element is by default the quilt element, which is how high the child element is, and how high the parent element is. However, when the child element is set to float, the child element is completely out of the document flow, which causes the child element to not hold the height of the parent element, resulting in a height collapse of the parent element.

Here is an example:

  <p class= "Box1" >        <p class= "Box2" ></p>    </p>

<style type= "Text/css" >             . box1{            border:10px red Solid;            }        . box2{            Background-color:yellow;            width:100px;            height:100px;            Float:left;                       }    </style>

Clear floating explanation

The main purpose of clearing floats is to solve the problem of overlapping elements due to floating elements falling out of the stream, or the height of the parent, which corresponds to two situations in which the float needs to be cleared: clear the front sibling elements floating and closed child elements floating (resolving parent element height collapse).

Clear front sibling element float

Clearing the front sibling floats is simple, just need to be used on elements that don't want to be affected by floating elements clear:both , HTML & CSS code like this:

<p class= "FL" > I was left floating element </p><p class= "FR" > I was right floating element </p><p class= "CB" > I am not affected by floating elements </p >

. fl {    float:left;}. Fr {    float:right;}. CB {    Clear:both;}

Prior to CSS2, the clear principle was to automatically increase the value of the upper margin (margin-top) of the element so that it fell below the floating element. A purge area (clearance) is introduced in CSS2.1, which adds extra space above the outer margin of the element, leaving it at the bottom of the floating element. So if you need to set the spacing between the floating element and the clear element, you have to set the margin-bottom of the floating element, not the margin-top of the clear element.

Demo visible: Clear clears floating

Closing child elements Floating

We know that when the page layout is calculated, if the parent element's height is not set, the height of the parent element is highly open by his child elements. However, if the child element is set to float, out of the flow of the document, then the parent element will ignore the child element when calculating the height, even when all child elements are floating, there will be a parent element height of 0, which is called the parent element height collapse problem. In order for the parent element to properly wrap the height of the child element without collapsing, we need to close the floating of the child element.

In general, there are two ways to close a child element float:

• To set the last elementclear: both

• Create a new BFC (block formatting context) for the parent element

clear:both

Since our last element is used clear:both , the element can be unaffected by the floating element at the very bottom of the parent element, and the parent element should take into account the position of the normal element when calculating the height, so the height naturally wraps to the bottom, and there is no collapse.

For this method, we used to add a new empty element ( <b> or <span> , <p> etc.) to implement it, as follows:

<p class= "Container" >    <p class= "box" ></p>    <span class= "Clear-box" ></span> </p>

. box {    float:left;}. Clear-box {    Clear:both;}

Although this approach is more intuitive, it is not very elegant, because it adds a useless blank label, is redundant and inconvenient for later maintenance (it is generally not recommended). So later there is the famous Clearfix method implemented by the pseudo-element of the parent element (:: After), with the following code:

<p class= "Container clearfix" >    <p class= "box" ></p></p>

. clearfix::after {    content: "";    display:table;    Clear:both;}

The above method adds a class name specifically for the parent element to handle the floating of a closed child element clearfix , which uses the ::after pseudo-element class selector to add an empty structure to clear the float, and perhaps you are wondering why the property is set display:table , which actually involves a more complex evolutionary process, Specific reference--clearfix floating evolutionary history

New BFC

The principle of this method is that when a parent element creates a new BFC, its height is calculated and the package of the floating child element comes in.

Let's take the example as follows: If our picture is floating, the height of the parent element article is collapsed (not including the picture), and the height of the root element html (by default, our root element html is a BFC) includes the height of the image.

Now that you've created a new BFC that solves the problem of a parent element's height collapse, you can create a BFC:

• The root element or other element that contains it

• float (float of element is not none)

• An absolutely positioned element (the element has a position of absolute or fixed)

• Inline block Inline-blocks (element with Display:inline-block)

• Table cell (element with Display:table-cell,html table cell default property)

• Table caption (element with display:table-caption, HTML table title default property)

• The block element has overflow, and the value is not visible

• Display:flow-root

Although there are so many methods available, we often use the overflow: hidden code as follows:

<p class= "Container" >    <p class= "box" ></p></p>

. container {    Overflow:hidden;}. box {    float:left;}

The above mainly explains some of our more frequent clear floating solution, seemingly simple to clear the floating method actually involves a lot of complex CSS rules, we in the actual operation can be based on different situations refer to the above method.