フローティング要素がスタックするのはなぜですか?-htmlチュートリアル-php.cn

フローティング要素がスタックするのはなぜですか?

PHP中文网

リリース： 2017-03-31 17:10:10

オリジナル

1729 人が閲覧しました

<!DOCTYPE html> 
<html> 
<head> 
<title>浮动元素卡住</title> 
</head> 
<body style="width:500px;"> 
<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div> 
<div style="background-color:#F00;width:200px;height:100px;float:left;"></div> 
<div style="background-color:#00F;width:200px;height:100px;float:left;"></div> 
<div style="background-color:#F00;width:200px;height:100px;float:left;"></div> 
<div style="background-color:#000;width:200px;height:100px;float:left;"></div> 
</body> 
</html>

ログイン後にコピー

フローティング要素がスタックするのはなぜですか?

なぜ青い部分が緑の下にないのですか？なぜ下の赤は緑の下にいけないのでしょうか？

ディスカッションへの返信（解決策）

<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div>

ログイン後にコピー

非常に矛盾しています

フロートとはそういうものです。。ただ慣れてください。。通常は2つ連続した場合。。すべてにクリアフロートがあります。。自動的に降りてきます。

<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div>

ログイン後にコピー

高さが違うことは知っていますし、フロートをクリアすることで効果が得られることも知っています。私が知りたいのは、なぜそのような結果が生じるのかということです。 ?

ブロックレベルの要素は独自の行を占有するため、フローティングした後は、ここにはスペースがなく、自然に右に移動します

考えを変えるべきです
理由は聞かないでください
そうであるはずです。結果はすでに見えています
それがあなたですどのような状況で何が起こるかをすでに知っています
見えているものが得られるものです

上記がフローティング要素がスタックする理由です?関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。