CSS フロートプロパティ図 フロートプロパティの詳細

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の問題も多数あるため、困難な作業になる可能性があります。その配置には、包含ブロックだけでなく、行ボックス、ブロック ボックス、インライン ボックスも含まれます。この記事には、float プロパティを適用する実施形態の実例といくつかのエラーが含まれています。

CSS的float示例1

「フロート」とは何ですか?

CSS の特定の要素はブロック要素です。たとえば、段落タグを 2 つ P として配置すると、2 行に配置されます。各要素は 1 行を占めます。1 行で表示したい場合は、インライン属性を使用してページに表示できます。

ページ要素の折り返しプロパティを変更するもう 1 つの効果的な方法は、float を使用することです。典型的な例としては、"float" を使用して画像を左または右に揃えることがあります。以下は、画像と段落を含む単純な HTML コードです。

コードをコピー
コードは次のとおりです。

<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>

これらは新しい行に表示されます。

CSS的float例2

画像の外観を変更するために、画像に CSS コードを追加してみましょう。


コードをコピー
コードは次のとおりです。

画像
{
フロート: 右;
マージン: 20px;
}

この時点で、正しい配置が得られます。

CSS的float示例3

さらにテキストがある場合、段落は画像の周囲に折り返されます。

CSS的float例4

たとえば、画像とテキストを 20 ピクセルインデントする必要があります。このようなコードを記述すると、次のコードは間違っており、動作しません。


コードをコピー
コードは次のとおりです。

p
{
マージン: 20px;
}

こうすると、正しいことになります:


コードをコピー
コードは次のとおりです。

画像
{
マージン: 20px;
}

CSS的float例如5

それでは、上記の p 段落の 20 ピクセルのインデントがなぜ機能せず、効果的ではないのかと疑問に思うかもしれません。確認するには、スケルトン コードを追加してみましょう。


コードをコピー
コードは次のとおりです。

p
{
境界線: 実線 1px 黒;
}

結果はあなたを驚かせるかもしれません:

CSS的float的例子6

境界線がないと (境界線はここでは影響しません。単に理解してもらうためのものです)、画像が段落内に表示されることがわかります。したがって、最初のケースでは margin プロパティは効果がありません。この問題を解決するには、段落pにfloat:leftを使用し、絶対幅を設定します。設定後の効果は次のとおりです。


コードをコピー
コードは次のとおりです。

画像
{
フロート: 右;
マージン: 20px;
}
p
{
フロート: 左;
幅: 220ピクセル;
マージン: 20px;
}

CSS的float例如7

奇妙なルール「フロート」

次に、「float」ルールを使用して float オブジェクトを変換する、より複雑な方法に進みましょう。サムネイルを作成するときに必要になる場合があります。例えば:


コードをコピー
コードは次のとおりです。

<ul>
<li><img src="http://placehold.it/100x100&text=1"/></li>
<li><img src="http://placehold.it/100x150&text=2"/></li>
<li><img src="http://placehold.it/100x100&text=3"/></li>
<li><img src="http://placehold.it/100x100&text=4"/></li>
<li><img src="http://placehold.it/100x100&text=5"/></li>
<li><img src="http://placehold.it/100x150&text=6"/></li>
<li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>

デフォルトでは、各 li 項目はそれぞれ 1 行を占めます。すべての「float: left」を配置すると、画像は改行で整列します。

コードをコピー
コードは次のとおりです。


{
フロート: 左;
マージン: 4px;
}

CSS的float例如8

しかし、画像の高さが異なる場合はどうなるでしょうか?

CSS的float例如:9

リスト内の要素に表示属性を追加すると、次の図に示すように、効果はより良くなります。

コードをコピー
コードは次のとおりです。


{
表示: インライン;
}

CSS的float例如10

次に垂直方向に揃えてみましょう。

コードをコピー
コードは次のとおりです。

画像
{
垂直方向の位置合わせ: 上;
}

CSS的float例11

より高い位置にある画像の場合、他のすべての画像が前の画像を囲むことになるので注意してください。例:

CSS的float例如12

もう 1 つの例は、要素の順序を変更することです。項目のリストがあります。

コードをコピー
コードは次のとおりです。

<UL>
<LI> <img src="http://placehold.it/100x100&text=1"/> </li>
<li> <img src="http://placehold.it/100x100&text=2"/> </li>
<LI> <img src="http://placehold.it/100x100&text=3"/> </li>
<li> <img src="http://placehold.it/100x100&text=4"/> </li>
<LI> <img src="http://placehold.it/100x100&text=5"/> </li>
<li> <img src="http://placehold.it/100x100&text=6"/> </li>
</ul>

逆の順序にしたい場合は、「float: left」の代わりに「float: right:」を使用します。HTMLでは、上記のコードのように要素の順序を変更しません。CSSを使用して操作します。

CSS的float例如13

「フロート」を使用すると、ページ上の項目をグループ化するのに便利ですが、次のコンテンツ (テキストまたはブロック) も変更されるという大きな問題に直面します。たとえば、次のような画像のセットがあります。

CSS的float例如14

次のテキストがブロック全体に流れ始めます。

CSS的float例如15

これを回避するには、「clear」プロパティを使用する必要があります。これを2番目の画像に適用すると次のようになります。

コードをコピー
コードは次のとおりです。

ul li:n番目の子(2)
{
クリア:左;
}

結果は次のとおりです:

CSS的float例如16

この場合、残りの画像は引き続き「float: left」を継承します。それに応じて、テキストは歪んで表示されます。

CSS的float例如17

段落には clear:both を使用する必要があります。


コードをコピー
コードは次のとおりです。

p
{
クリア: 両方;
}

私たちの問題の解決策は次のとおりです。

CSS的float例如18

さて、前の例で、ギャラリーに背景を設定する必要があると想像してみましょう。アイテムが浮かばない場合は、次のようになります。


コードをコピー
コードは次のとおりです。

ウル
{
背景: グレー;
}

CSS的float例如19
しかし、リストから「float: left」を追加すると、背景は完全に消えます。
CSS的float例如20

最初に高さを UL に設定すると、次のようになります。

コードをコピー
コードは次のとおりです。

ウル
{
高さ: 300px;
}

CSS的float例如21
背景のサイズが定義されているため、問題は解決されません。 UL と同じレベルの 'DIV' 要素に適用されるクラス "clearfix" が役立ちます。


コードをコピー
コードは次のとおりです。

.クリアフィックス
{
クリア: 両方;
}

「オーバーフロー」を使用する別の解決策もあります。

コードをコピー
コードは次のとおりです。

ウル
{
オーバーフロー:自動;
}

CSS的float實例22

浮動項目に関する 9 つのルール:

フロートされた項目は、親コンテナーの端を超えて拡張することはできません。左フロートボックスの左マージン端は、その包含ブロックの左端より左側に現れてはなりません。 : : : : : : : : : : : : : : :

フローティングのルールは非常にわかりにくいことがわかりますが、これらのルールから、フローティングの目的は、包含ブロックをオーバーフローさせずに、できるだけ上または左/右に近づけて配置することであり、その前に生成されるブロック ボックス、フローティング ボックス、および行ボックスの上端よりも高くしないことであることが簡単にわかります。

<<:  JS ES の新機能: 拡張演算子の紹介

>>:  MySQL の日付フォーマットと複雑な日付範囲クエリ

推薦する

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

MySQL構成SSL証明書ログインの実装

目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...

mysql5.7.18 のインストール時にエントリが見つからない問題の解決方法

mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...

バックアップ データをインポートするときに innodb_index_stats がエラーを報告する場合の主キー競合の解決方法

障害の説明percona5.6、mysqldump フルバックアップ、バックアップデータのインポート...

12個のJavascriptテーブルコントロール(DataGrid)が整理されています

DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、...

Mysql ルートユーザーアカウントのパスワードをリセットする問題を解決する

問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...

超詳細なMySQL使用仕様の共有

最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

HttpとHttpsの両方をサポートするNginxの詳細な設定

最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...

Docker イメージのインポートとエクスポートのコード例

Dockerイメージのインポートとエクスポートこの記事では、移行、バックアップ、アップグレードなどの...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...

MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...