ホームページ >ウェブフロントエンド >htmlチュートリアル >オーバーフロー: 隠れた問題_html/css_WEB-ITnose
オーバーフロー: 隠れた問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:42:491238ブラウズ
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 をクリアしますが、今度は親要素ではなく兄弟要素に適用されるためです。原理は何ですか？専門家の回答をお願いします。
ディスカッション（解決策）への返信
誰も答えられない？専門家の回答をお願いします。
なんと、誰もこれに戻れないのでしょうか？
私がテストしたのは2番目のディスプレイです。テストブラウザはIE8.0です。
私がテストしたのは2番目のディスプレイです。テストブラウザはIE8.0です。 IE は別の問題です。フロントエンドの人々は皆、この愚かな Microsoft を嫌います。
Zhihuさんからすでに知っているので投稿します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。