html - height: auto は HTML と CSS でどのように機能しますか?

Question

CSS と HTML ではどのように機能しますheight: autoか? heightに設定されている要素の高さを計算する際、ブラウザは何を考慮しautoますか?

Answer 1

これは、W3C CSS2 仕様からコピーされた抜粋です。

インライン レベルの子のみがある場合、高さは一番上のライン ボックスの上部と一番下のライン ボックスの下部の間の距離です。

ブロック レベルの子ボックスがある場合、高さは、一番上のブロック レベルの子ボックスの上マージン エッジと、一番下のブロック レベルの子ボックスの下マージン エッジの間の距離です。

絶対配置の子は無視され、相対的に配置されたボックスはオフセットなしで考慮されます。子ボックスは無名ブロック ボックスの場合があることに注意してください。

さらに、要素の下部マージンの端が要素のコンテンツの下部の端よりも下にある浮動子孫が要素にある場合、高さはそれらの端を含むように増加されます。このブロック フォーマット コンテキストに参加する float のみが考慮されます。たとえば、絶対配置された子孫内の float や他の float は考慮されません。