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

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

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ブラウザの自動パスワード保存プロンプト機能を無効にする方法

推薦する

MySQL 8.0.13 解凍版のインストールと設定方法のグラフィックチュートリアル

1. インストール1. MySQLをダウンロードするダウンロードアドレス: リンクアドレスブラウザで...

MySQL sql_modeの適切な設定に関する詳細な説明

MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...

MySQL 時間差関数 (TIMESTAMPDIFF、DATEDIFF)、日付変換計算関数 (date_add、day、date_format、str_to_date)

1. 時間差関数(TIMESTAMPDIFF、DATEDIFF) MySQLを使用して時間差を計算...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

Dockerでnginxを実行し、ローカルディレクトリをイメージにマウントする方法

1 hupからイメージを取得する docker プル nginx 2 マウントするディレクトリを作成...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...

CSS 動的読み込みバー効果のサンプルコード

CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

UbuntuはSSHサービスのリモートログイン操作を開始します

ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...

JavaScript を使用してカルーセル効果を実装する

この記事では、カルーセルマップの特殊効果を実現するためのJavaScriptの具体的なコードを参考ま...