概要ページでのフロートとクリアフロート

概要ページでのフロートとクリアフロート

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

また、複数列レイアウトを作成する最も簡単な方法にもなりました。

 <画像ソース="" />
<p>テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>

【1】テキスト折り返し画像

  P {余白: 0; 境界線: 実線 1px;}
  画像 {float: 左;}

【2】複数列レイアウトを作成する

  P {余白: 0; 境界線: 実線 1px; 幅: 200px; フロート: 左;}
  画像 {float: 左;}

2. フローティング要素はドキュメント フローの外側にあり、親要素はそれを囲まないためそれを見ることができません。そのため、子要素には高さがありますが、親要素は支えられず、これは望ましい状態ではありません。

解決策は3つあります。状況に応じて適宜適用してください。

 <セクション>
<画像ソース=" />
<p>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p>
</セクション>
<footer>これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。</footer>
セクション、フッター {border: solid 1px;}
画像 {float: 左;}

【1】親要素にoverflow: hiddenを追加し、親要素がフローティング要素を囲むようにする

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

さらに、overflow: hidden には、親要素にフロートされた子要素を確実に含めることができるという別の効果もあります。

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

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

  セクション {border: solid 1px; float: left; width:100%}
  フッター {border: solid 1px; clear: left}
  画像 {float: 左;}

余白によって自動的に中央に配置される要素には使用できません。そうしないと、中央に配置されなくなります。

【3】非浮遊クリア要素(疑似要素)を追加する

.clearfix:後{
  コンテンツ: "";
  表示: ブロック;
  高さ: 0
  可視性: 非表示;
  クリア:両方
}

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

 <セクション>
  <画像ソース=" />
  <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>
  <画像ソース=" />
  <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>
  <画像ソース=" />
  <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p>
</セクション>
.clearfix:後{
  コンテンツ: "";
  表示: ブロック;
  高さ: 0
   可視性: 非表示;
  クリア:両方
}

以上がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立てば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  サーバーストレステストの概念と方法 (TPS/同時実行性)

>>:  Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法

推薦する

Html/Css (初心者が最初に読むべきガイド)

1. Web標準の意味を理解する - なぜWeb標準を採用するのか***** コンテンツとスタイル...

JavaScriptの詳細な説明 thisキーワード

目次1. はじめに2.これを理解する3. これは誰ですか? 4.矢印関数はさらに読む要約する1. は...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

CentOS サーバーのセキュリティ構成戦略

最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Vue ページをリフレッシュするために provide と injection を適用する

目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...

MySQL で誤って削除したテーブル データを回復する方法 (必読)

バックアップがあれば、非常に簡単です。最新のバックアップ データを生成し、mysqlbinlog を...

ウェブページ作成の基本宣言文書型記述(DTD

CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

CSS で複数の境界線を実装するためのヒント

1. 複数の国境[1]背景: ボックスシャドウ、アウトライン使用シナリオの多様性を考慮すると、複数の...

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

Linux 上のカラフルな猫

Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...