Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to solve the high collapse of the parent element in css" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to solve the high collapse of the parent element in css" article.

First of all, you have to answer what the parent element is highly collapsed:

In the document flow, the height of the parent element is supported by the child element by default, that is, the height of the child element is as high as the parent element. However, when the child element is set to float, the child element will be completely separated from the document stream, which will cause the child element to fail to prop up the height of the parent element and cause the height of the parent element to collapse.

The following is an example:

.box1 {

Border:10pxredsolid

}

.box2 {

Background-color:yellow

Width:100px

Height:100px

Float:left

}

Clear floating details

The main purpose of clearing floats is to solve the problem of element overlap or high collapse of parent elements caused by the separation of floating elements from text flow. these two problems correspond to two situations that need to clear the float: clearing the previous sibling element float and closing the child element float (solving the high collapse of the parent element).

Clear the previous sibling element float

Clearing the previous sibling element float is simple, just use clear:both on elements that you don't want to be affected by the floating element, and the HTML&CSS code is as follows:

I am the left floating element

I am the right floating element

I am not affected by floating elements.

.fl {

Float:left

}

.fr {

Float:right

}

.cb {

Clear:both

}

Before CSS2, the principle of clear was to automatically increase the upper outer margin (margin-top) value of the element so that it finally fell below the floating element. A clear area (clearance) is introduced in CSS2.1-the extra spacing above the outer margin on the element so that it finally falls below 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 clear float

Closed child element float

We know that when calculating page layout, if the height of the parent element is not set, then the height of the parent element is highly stretched by its child elements. However, if the child element is set to float and deviates from the document flow, the child element will be ignored when the parent element calculates the height, and even when all the child elements are floating, the parent element height will be 0. This is the so-called parent element height collapse problem. In order for the parent element to correctly wrap the height of the child element without collapse, we need to close the float of the child element.

In general, we have two ways to close child element floats:

Set clear:both for the last element

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

Clear:both

Because our last element uses clear:both, the element can appear at the bottom of the parent element without the influence of the floating element, and the parent element needs to consider the position of this normal element when calculating the height, so the height is naturally wrapped to the bottom, and there is no collapse.

For this method, we used to add an empty element (or

And so on), as follows:

.box {

Float:left

}

. clear-box {

Clear:both

}

Although this approach is intuitive, it is not very elegant because it adds a useless blank tag, which is more redundant and inconvenient for later maintenance (it is generally not recommended). So later there is a famous clearfix method implemented through the pseudo element of the parent element (:: after), the code is as follows:

.clearfix:: after {

Content: ""

Display:table

Clear:both

}

The above method adds a clearfix class name to the parent element specifically for handling closed child element floats. This class uses:: after pseudo-element class selector to add an empty structure to clear the float. You may be wondering why you want to set the display:table attribute, which actually involves a more complex evolutionary process. For more information, please refer to the history of clearfix floating evolution.

Create a new BFC

The principle of this method is that when the parent element creates a new BFC, its height is calculated by including the floating child elements.

The above is about the content of this article on "how to solve the high collapse of the parent element in css". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.