また、マルチカラムレイアウトを作成する最も簡単な方法にもなりました。
<img src = /> <p>テキストコンテンツ段落コンテンツコンテンツテキストコンテンツコンテンツコンテンツコンテンツテキストコンテンツコンテンツコンテンツテキストテキストコンテンツコンテンツコンテンツコンテンツコンテンツ段落コンテンツ< /p>[1]テキスト巻きの写真
p {マージン:0; border:solid 1px;} img {float:left;} 【2】マルチカラムレイアウトを作成しますp {マージン:ソリッド幅:200px;}第二に、フローティング要素はドキュメントフローから外れており、親要素は彼に囲まれていないため、彼を見ることができず、サブエレメントは高く、親要素はサポートされません、私たちがそれを望んでいるわけではありません。以下に3つの方法を解決します。
<src =/> <p>これは段落ですボトムはボトムです
セクション、フッター{境界:ソリッド1px;} img {float:left;} [1]親要素にオーバーフローを追加しますこのステートメントの実際の使用は、オーバーフローを使用した後、親要素が大規模なコンテンツで開かれるのを防ぐことです。
さらに、Overflow:Hiddenは別の役割もあります。つまり、親要素がフローティングサブエレメントを含めるように確実に強制することができます。
ドロップダウンメニューの上部要素を使用することはできません。そうしないと、サブエレメントが表示されないため、ドロップダウンメニューは表示されません。
[2]同時に、親要素が浮かんでおり、100%の幅はブラウザの幅と同じ幅であり、フッター設定のフローティングフロートを設定しているため、フースがセクションの隣に絞られないようにします。セクション{border:left;外側の距離の自動外側要素では使用できません。それ以外の場合は、もうありません。
[3]非強化除去要素(擬似要素)を追加する.Clearfix:{content:block:0 clear} 3.親要素がない場合、それを削除する方法(グループとしてIMG P、親要素なし)<セクション> <img src = /> <p class = clearfix>テキストコンテンツ段落段落段落コンテンツコンテンツコンテンツコンテンツコンテンツテキストコンテンツテキストコンテンツテキストコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ段落段落段落コンテンツ< /p> <img src = /> <class = ClearFix>テキストコンテンツ段落コンテンツテキストコンテンツ段落コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ< /p> <img src = /> <p class = clearfix>テキストコンテンツパラグラフコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト段落テキストコンテンツ段落コンテンツ</p> </セクション>
.Clearfix:{content:block:0 clear}上記は、この記事のすべてのコンテンツです。