CSS フロートが兄弟要素をカバーしないのはなぜですか_html/css

CSS フロートが兄弟要素をカバーしないのはなぜですか_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:22

オリジナル

1743 人が閲覧しました

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