Home>

I am self-taught and write the front part of the website in HTML/CSS.
As for knowledge, there is only progate completion level + α.


  
    Child element (contents)
  


When writing code like, the size of block elements such as wrapper and container is relative to the size of child elements
・ When it spreads automatically
・ If i do not specify the height yourself, the size will be the minimum.
I don't understand the difference.
Also, as a solution, I came up with the idea that height should be set to auto and overflow should be set to hidden, but I don't understand how it works.

-Difference between when the parent block element expands automatically and when it does not expand
・ The reason why the block element problem that does not spread automatically when height: auto overflow: hidden is solved

Would you please teach me?

  • Answer # 1

    -Difference between when the parent block element expands automatically and when it does not expand

    Maybe in a child elementfloatOrposition: absolute;It was when (absolute position specification) was set.

    float --CSS: Cascading Stylesheets | MDN

    Absolute position specification

    Both are out of the normal flow and are considered non-existent from the perspective of the parent element. Therefore, since there is no content, the height is 0.

    ・ The reason why the block element problem that does not spread automatically when height: auto overflow: hidden is solved

    floatIf you set, this will solve it.

    It seems that the overflow property recognizes the height of the floating child element by float.

    [CSS] Float release "overflow: hidden" without clearfix