ホームページ > 記事 > ウェブフロントエンド > CSS フロートが兄弟要素をカバーしないのはなぜですか_html/css_WEB-ITnose
CSS フロートが兄弟要素をカバーしないのはなぜですか_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:50:221721ブラウズ
html+CSS ソース コード:
<html><head><style type="text/css">img {border:solid 1px green;display:block;}#id1{float:left;}div{border:solid 2px blue;}p{border:solid 1px red;}</style></head><body><div><img src="/i/eg_cute.gif" /><img id="id1" src="/i/eg_cute.gif" /><p>This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.</p></div></body></html> 効果は次のとおりです:
質問:
W3CSchool では、フローティング セクションで CSS の配置について説明します。フレーム 1 が左にフローティングすると、フレーム 2 がカバーされます。その理由は、フローティングした後、要素がドキュメント フローから切り離され、スペースを占有しないためです。 2 つの写真のうち一方をフローティングしたときに、一方が隠されないのはなぜですか? ? ?ブラウザはIE8コア360ブラウザです。
私の理解のどこが間違っていますか?
ディスカッションへの返信 (解決策)
テストアドレスW3CSchool を参照してください。リンク: http://www.w3school.com.cn/tiy/t.asp?f=csse_float
よく理解しましょう。別のアドレスを教えてください:
http://www.w3school.com.cn/css/css_positioning_floating.asp
カバーされる float は float ではなく、position:absolute 属性です。要素が作成されます。ドキュメントフローから離脱することは、ページ上でフローティングすることと同じです
試してみましたが、imgは機能しませんが、divを使用するだけであれば、あなたが言ったように見えます。フレーム 1 がフレーム 2 を覆っている
試してみましたが、img は機能しません。ただし、div だけを使用すると、フレーム 1 がフレーム 2 を覆っているように見えます。 > img と div の間の問題ではありません。あなたのテストは間違いなく間違っています (最初の DIV を float に設定し、2 番目の DIV を float に設定しないと思います)。
要素については、W3Cschool では十分に明確ではありません。詳細については、私のブログを参照してください: http://blog.csdn.net/k346k346/article/details/48530467
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。