Css float parent element adaptive height ineffective solution

When several parallel div elements use the float attribute, because the parent container does not define the actual height, an error occurs in IE and the background color or background image of the parent container cannot be displayed.

The following experiment is performed:
1,
Abnormal display settings
Sub-container: use float
Parent container: no height defined
2,
During the test, it was found that when the parent container does not define the height, the float attribute is canceled, and the background color is displayed normally.

Sub-container: Do not use float
Parent container: no height defined
3,
After the height is defined for the parent container, it is normal for the sub-container to use float again.

Sub-container: use float
Parent container: defines the height

Cause and solution

If you do not close (clear) floating elements, it will cause the consequence that the height of the ----- div cannot be automatically increased.
The reason why peripheral elements cannot be well extended lies in overflow, because overflow is invisible. See W3C explanation

Solution:

Set height for parent element
Float the parent element

Add <DIV style = "clear: both;"> </div> to the child div to clear the floating. Can be used, but additional junk code is added.

The code is as follows:	Copy code
<Div style = "background: #666;"> <! -Float container-> <Div style = "float: left; width: 30%; Height: 40px; background: # EEE; "> Some Content </div> <Div Style = "clear: both"> </div> </Div>

Note that there is an additional code to clear the floating. This is a good CSS code habit, but this method adds useless elements.

4. set the parent element overflow to "hidden" or "auto" (select as needed). Set the parent container overflow to "hidden" or "auot" to close the floating element in a standard compatible browser, however, when using overflow, it may affect the page performance, and the effect is uncertain.

The code is as follows:	Copy code
<Divstyle = "overflow: hidden;"> <Divstyle = "float: left;"> test </div> </Div>

The following is an example.

Let's write an example to show how this problem occurs more intuitively. First, write the following HTML code:
  

The code is as follows:	Copy code
<Div id = "top"> <Div id = "left"> </div> <Div id = "right"> </div> </Div>      The CSS code is as follows: # Top { Background: blue; Width: 800px;     } # Left { Float: left; Width: 400px; Height: 50px; Background: red;     } # Right { Float: right; Width: 400px; Height: 60px;     }

We can see that there is a top-level element with a width of 800 pixels and a blue background color. It has two child elements floating on both sides of the left and right, and the height of the child element is 50 pixels on the left, the value on the right is 60 pixels. To facilitate viewing, set the background color of the child element on the left to red.
Use Firefox or other modern browsers to open this webpage. The effect is shown in the following figure:

Only the left-floating child element is visible, and the parent element disappears because its child elements are floating and will not affect the parent element, there is nothing inside it except two floating child elements, so the height is 0 by default. Now try to open this webpage with IE8 or earlier versions (IE8 has fixed this issue), as shown in the following figure:

The parent element quilt element is large and the height is 60px. What bothered me for a long time was the effect I wanted in IE, but the W3C definition of float didn't affect the size of the parent element. What should I do? One solution is to use a fixed height for the parent element. What if the size of the child element is unknown? At the beginning, I checked the information online and added two codes to the CSS of the parent element:
    
Zoom: 1;
Overflow: hidden;
    
Firefox can automatically adapt to the size of child elements.