HTMLフロートとクリアフロートの詳しい説明

この記事では、主にページ上のフローティングとクリアの概要を説明し、それを説明するための例を示します。エディターで見てみましょう

1. フロート: 主な目的は次のとおりです。画像のテキスト折り返しを実現する効果。

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

<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 つのメソッドがあります。以下を解決するには、状況を評価して適切に適用してください:

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

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

【1】親要素にオーバーフローを追加: hidden; 親要素がフローティング要素を強制的に囲みます

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

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

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

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

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

は外側の余白の近くに配置できません 自動的に中央揃えの要素が使用されます。そうしないと、中央に配置されなくなります。

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

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

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

りー

りー

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