About the background color display problem_html/css_WEB-ITnose

In two nested class styles, the parent style defines the background color. When the float: attribute is defined in the child style, the background color of the parent style is not displayed, and when the float: attribute in the child style is canceled You can display the background color defined by the parent style.
For example:

aaaa

Among them, #ys1 is the parent style that defines the background color. #ys2 is a substyle that defines the float: attribute.
Is there any way to display the background color of #ys1 without canceling the float: attribute of #ys2?

Reply to the discussion (solution)

Found the solution: when using a clear: both; attribute style and placing it after the #ys2 style, the background color can be displayed.

It will have the same effect if you give the parent layer a float or overflow:hidden

Why does this happen?

Why does this happen?
Because when the float: attribute is defined in the child style, the child element is not part of the regular document flow.
makes the parent element unable to wrap the child element in height, and the height of the parent element becomes smaller or becomes 0,
When the height of the parent element becomes 0, of course you cannot see the background color of the parent element.
You add a border style border:1px solid to the parent element, and
can see it. The parent element has no height and becomes a line

See Clear Float

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn