オーバーフロー: 隠れた問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

オーバーフロー: 隠れた問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:42:49

オリジナル

1227 人が閲覧しました

HTML CSS

<html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>无标题文档</title>	</head>	<body>        <div style="border:solid 1px #006600; width:300px; height:300px; float:left;"></div>        <div style="border:solid 1px #006600; width:200px; height:200px; background-color:#060"></div>    </body></html>

ログイン後にコピー

このコードは誰でも理解できると思います。次に、overflow:hidden 属性を 2 番目の div に追加しました。こうなってしまうのですが、なぜでしょうか？

<html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>无标题文档</title>	</head>	<body>        <div style="border:solid 1px #006600; width:300px; height:300px; float:left;"></div>        <div style="border:solid 1px #006600; width:200px; height:200px; background-color:#060; overflow:hidden"></div>    </body></html>

ログイン後にコピー

overflow:hidden はフロートをクリアするために親要素によって使用されるため、視覚的にフローティングではない親要素がフローティングの子要素を含むように自動的に展開されることはわかっています。ただし、ここでは親要素ではなく 2 つの兄弟要素 div を作成し、2 番目の div に overflow:hidden 属性を設定します。 2 番目の div が最初の浮動 div のカバレッジを逃れて、最初の浮動 div に固執するのはなぜですか。 2 番目の div にも float:left 属性が設定されているかのようです。彼らの立場が変わらないのは当然ですよね？ overflow:hidden は親要素の float をクリアしますが、今度は親要素ではなく兄弟要素に適用されるためです。原理は何ですか？専門家の回答をお願いします。