div要素の上にあるdivが左に浮かぶと、div要素が上に移動しないのはなぜですか？

Question

私はのCSSでフロートのプロパティを研究しています。

は、これは私のhtmlコードです：

.left { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 
.normal { 
 
    text-align: center; 
 
    width: 25%; 
 
}

<div class="left"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is left</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div> 
 
<div class="normal"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is normal</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div>

私は通常のクラスと私のdivがdivのクラス左と上方向に動いていない理由を知りたいですか？私はクラスのdivがp tag上方に移動の内容を左に私の後に

<p>something</p> 

を書きますが、これはdivで起きていない場合ので

は私がなぜしたい ...この質問をしましたこれはですか？

Answer 1

最初のdivは25％の幅であるため、使用可能な領域の25％を水平方向に占めます。
2番目のdivも25％の幅です。したがって、最初のdivは2番目のdivが占めるすべての領域を占有します。単に右の部屋がありません！

解決策：2番目のdivを25％幅ではなく50％（最初の25％を超える）にします。

.left { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 
.normal { 
 
    text-align: center; 
 
    width: 50%; 
 
}

<div class="left"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is left</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div> 
 
<div class="normal"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is normal</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div>

Answer 2

こんにちは@GopalシンRathore

私は私が正しくあなたの質問を理解していると信じています。

これは、display：blockを持っているdivに幅が設定されているためです。これは、display：blockをflexに変更した場合、その横に表示されます。 pタグにも幅を設定するとdivと同じようになります。

これがあなたの質問に答えることを願っています。

Answer 3

トップへ通常のdiv移動し、正常なコンテンツがありません：

氏リスターはあなたにソリューションを提供します：あなたがする必要がある通常拡張を参照してください。 を通常のに変更して、内容が右に収まるようにします。

.left { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 
.normal { 
 
    text-align: center; 
 
    width: 27%; 
 
    background-color: lightblue; 
 
    border: solid 1px blue; 
 
}

<div class="left"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is left</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div> 
 
<div class="normal"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is normal</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div>