How to solve the problem that the parent container height cannot be automatically opened

Developers who are just getting started with website design layout will certainly encounter this problem, that is, when all sub-containers are floating, the height of the parent container cannot be automatically opened. This problem is invisible when we do not set borders or backgrounds for rich containers. The following code is used.

<Div style = "background: # F99; width: 400px; border: 1px solid # 3CF;"> <div style = "float: left; background: # 36F; width: 180px; height: 180px; "> I'm a son container. </div> <div style = "float: left; background: # F60; width: 180px; height: 180px;"> I'm the other son container. </div>

After running, most people will think it is obvious that a parent container contains two sub-containers, but it is not that simple. The height of the parent container is displayed as 0, what you can see is the border of the parent container, and the height is not supported by the height of the two internal sub-containers. At this time, if we set the background for the parent container, it will not be displayed.
The solution is actually relatively simple, that is, adding an attribute to the parent container, overflow: hidden.
Another effective method is to add

<Div style = "clear: both;"> </div>

To clear the floating. This is also a good practice. It is usually used when the parent container needs to set a fixed height, but it is afraid that the content is too large and cannot be displayed due to overflow settings. Both methods are valid and can be tested in practice.