HTML のフロートとクリアフロート

この記事では主にHTMLでのフローティングとクリアを紹介します。興味のある方はぜひ参考にしてください。

1. float: 主な目的は、画像の周囲にテキストを折り返す効果を実現することです。

複数列のレイアウトを作成する最も簡単な方法でもあります。

<img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【1】テキストラップ画像

　　P {margin: 0; border: solid 1px;}
　　img {float: left;}

【2】複数段レイアウトを作成

　　P {margin: 0; border: solid 1px; width: 200px; float: left;}
　　img {float: left;}

2. フローティング要素はドキュメントフローの外にあり、その親要素はできません子要素は囲まれないため、親要素はサポートされません

それを解決するには 3 つの方法があります を確認してください。状況を理解して合理的に適用します: rrree

<section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

【1】親要素にオーバーフロー: 非表示を追加します。親要素がフローティング要素を囲むように強制します

このようなステートメントの本当の目的は、親要素が邪魔されるのを防ぐことです。 overflow: hidden を適用した後、親要素はそのまま残ります。設定された幅で、大きい子コンテンツはコンテナによって切り取られます

さらに、overflow: hidden には別の効果もあります。親要素にその浮動子要素を強制的に含めます。

は、ドロップダウン メニューを使用するトップレベルの要素では使用できません。そうしないと、その子要素であるドロップダウン メニューが表示されません。

[2] 親要素を同時にフロートさせ、幅はブラウザの幅と100%同じにし、フッターがセクションの横に圧迫されないようにフッターにクリアフロートを設定します

section , footer {border: solid 1px;}
img {float: left;}

外側のマージン要素の使用の近くに自動的に中央に配置することはできません。そうしないと、中央に配置されなくなります。

【3】非フローティングクリア要素(疑似要素)を追加する

　　section {border: solid 1px; float: left; width:100%}
　　footer {border: solid 1px; clear: left}
　　img {float: left;}

3.親要素がない場合のクリア方法(グループとしてのimg p、親要素なし)

.clearfix: after {
　　content: "";
　　display: block ;
　　height: 0
　　visibility: hidden;
　　clear : both
}

rree

概要 : 上記がこの記事の全内容です。皆様の学習に役立つことを願っています。

関連する推奨事項:

JS の簡単な実装フローティングウィンドウ

http ハイジャックに対処する方法フローティング広告

クリアするための CSS 実装フローティング問題

以上がHTML のフロートとクリアフロートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。