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 の日付フォーマットと複雑な日付範囲クエリ

推薦する

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

MySQL8 ベースの docker-compose デプロイメント プロジェクトの実装

1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...

CSS マージンの重複と解決策の探索の詳細な説明

最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...

MySQL8のパスワードを忘れた場合の簡単な解決策

序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...

CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...

MySQLはライブラリ内の主キーなしでテーブルインスタンスコードを素早く取得します

概要MySQL データベースで主キーのないテーブルを表示するための SQL ステートメントをいくつか...

JavaScript 遅延読み込みの詳細な説明

目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...

Nginx のステータス監視とログ分析の詳細な説明

1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...

HTML で相対パスを使用してディレクトリのすべてのレベルのファイルを取得する方法の詳細な説明

相対パスの概念現在のファイルの場所を参照ポイントとして使用して、ターゲット ファイルへのパスを確立し...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

Tomcatの全体構造の簡単な紹介

Tomcat は Web コンテナとして広く知られています。Java を学び始めたときから現在の仕事...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...

MYSQL パフォーマンス アナライザー EXPLAIN 使用例分析

この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...

Linux ipcsコマンドの使用

1. コマンドの紹介ipcs コマンドは、Linux のプロセス間通信機能の状態を報告するために使用...