css float属性とpositionの違いの詳細な分析:absolute_Basicチュートリアル

1.float 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。 div は、それ自体で 1 行を占める典型的なブロックレベル要素です。

まず、最も基本的なブロックレベルの要素がどのように配置されているかを見てみましょう。 html コードでは、次のスタイルはこれに基づいています。

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

フレーム 1

フレーム 2
n

フレーム 3

CSS コード:

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

.boxBg{
margin: 0 自動;
幅:500px;
高さ:200px;
ボーダー:2px ソリッド #ccc
}
.box1{
幅:100px;
高さ:50px;
背景色:赤
}
.box2{
幅:100px;
高さ:50px;
背景色:青
}
.box3{
幅:100px;
高さ:50px;
背景色:緑
}

実行結果:

div はブロックレベルの要素であるため、ボックスは垂直に配置されます。実際の運用では、フレームを水平に配置する必要があることがよくあります。これを行うには 2 つの方法があります。 1 つ目は、display:inlin-block;

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

.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px Solid #ccc
}
.box1{
幅:100px;
高さ:50px;
背景色:赤;
表示:インラインブロック
}
.box2 {
幅:100px;
高さ:50px;
背景色:青;
表示:インラインブロック
}
.box3{
幅:100px;高さ:50px;
背景色:緑;
表示:インラインブロック
}

実行結果:

真ん中の隙間ですが、本質的な原因は要素間の空白にありますので、親要素のfone-sizeのサイズを設定することで空白の大きさを調整することができます。

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

.boxBg{
margin: 0 自動;
幅:500px;
高さ:200px;
ボーダー:2px 実線 #ccc;
font-size:34px;
}

font-size:34px に設定すると、隙間がさらに広がります。

実行結果:

同様に、ギャップを削除したい場合は、font-size:0; を変更する必要があります。

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

.boxBg{
margin: 0 自動;
幅:500px;
高さ:200px;
ボーダー:2px 実線 #ccc;
font-size:0
}

実行結果:

このようにして、希望通りのレイアウトとなり、ボックス内の文字が消えますが、これも文字の大きさが隙間に影響を与えることがわかります。子要素でリセットするだけです。もちろん、今日の焦点はそこではありません。同じ効果 float:left; も簡単に実現できます。

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

実行結果:

要素にフロートを追加すると、フローティング要素は親要素の境界線または別のフローティング要素の境界線に遭遇した直後に表示されます。たとえば、次の例では、フローティング要素の合計幅が親要素よりも大きい場合、行は折り返されます。行が折り返されると、前のフロートが検出され、その後に表示されます。

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

実行結果:

inline-block を使用すると結果はどうなりますか?

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

実行結果:

このとき、ボックス 3 はボックス 1 に続くのではなく、新しい行で始まります (1 と 2 の間のギャップについてはここでは説明しません)。これも inline-block と float を使用した判断です。モジュール幅がfloat 組版を使用すると、予想とは異なる結果が生じる可能性があるため、幅と高さが変更されない場合は float を使用することをお勧めします。一貫性がない場合は、特定のレイアウトを確認し、適切な属性を使用する必要があります。

以下にコードを掲載します。変更部分のみを掲載し、残りは変更せず、構造も変更しません。

box3 の float: left を削除すると、結果はどうなりますか?理解によれば、フローティング要素はスペースを占有しません。つまり、フレーム 3 はフレーム 1 を無視し、フレーム 2 は親要素の境界線のすぐ隣に表示されます。つまり、フレーム 1 がフレーム 3 を覆います。結果？

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

.box3{
width: 100px;高さ:50px;
背景色:green;
}

実行結果:

ボックス 3 のテキストがボックス 1 に隠れずに下に表示されるのはなぜですか?次に、コードと画像を見てください。

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

.box3{
高さ: 50px;background-color:green;
}

実行結果:

違いがわかりますか?はい。 box3 は幅を定義しません。幅は削除されます。幅を定義しないと、デフォルトの幅は親要素の幅になります。つまり、この時点では、幅: 500px、浮動要素が非浮動要素を覆います。 、ボックス 3 の前の幅 200px はフローティング要素によって占有されています。カバーされているのに、テキストがカバーされず、テキストがフローティング要素の 200px 後ろに押し込まれているのはなぜですか?

浮動要素はブロックのスペースを占有しないため、ボックス 3 は親コンテナの幅 500 ピクセルの 100% になりますが、浮動要素は他のスペース (ライン ボックス スペース) を占有します。テキストが占めるスペース。

これは、テキストが画像を浮かせた後に自動的に画像の周りを回り込む理由でもあります。フローティング要素はブロックレベルのスペースを占有しませんが、ブロックレベル要素内のテキストおよびインライン要素に影響を与えます。

この場合、3 つのボックスの幅を同じにしたい場合は、3 つのボックスの幅を 300px; に変更するだけで済みます。

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

.box3{
width: 300px; 高さ:50px;
背景色:緑;
}

実行結果:

フローティングの基本的な説明が終わったので、問題点について話しましょう。フローティングは使いやすいですが、実際には多くの問題も引き起こします。例:

実行結果:

通常の状況では、非常に一般的な問題です。灰色の背景はフレームと同じ高さである必要がありますが、現実は常に満足のいくものではありません :)

この状況の原因が浮遊であることは皆さんご存知のとおりです。はい、浮遊です。浮遊要素は通常の流れから離脱するとよく言われているので、通常の要素を浮遊要素のように扱うことができます存在しないため、ここにはそのようなものはありません。背景は開かれていますが、注意深く読んだ学生は、フローティング要素はブロック ボックスには影響しませんが、ライン ボックス、つまりテキストまたはインラインには影響することを上で述べたことを覚えているでしょう。要素は、ブロックレベル要素であってもインライン要素であっても、通常のフローに属します。フローティング要素が通常のフローから外れると、なぜラインボックスに影響を与えるのでしょうか?実際のところ、これらの概念的な事柄にこだわる必要はないと思います。私の理解によれば、フローティング要素はブロックレベルの要素と同じ水平スペースではなく、テキストのインライン要素と同じスペースにあるため、ここの境界線は背景の上にあることと同等であるため、背景要素。通常、フロートのクリアと呼ばれるもの。これは、フローティング要素のフロート属性を削除することを意味するのではなく、周囲にフローティング要素が存在しないように周囲のフローティング要素をクリアすることを意味します。したがって、ボックス 3 を希望する場合は、 2 行目に移動すると、ボックス 2 では clear:right; を使用できません。ボックス 3 では、clear:left;

を使用する必要があります。

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

.box3{
float:左; 幅:100px;
高さ:50px;
背景色:緑;
クリア:左
}

実行結果:

ok! これで理解できたので、背景とフレームを同じ高さにする方法について話しましょう。最初の方法: 最も直接的な方法は、背景の高さをフレームと等しくなるように直接設定することです。もちろんこれは問題ではありません。クリアについて話しましょう。まず、例を見てみましょう。

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

フレーム 1

フレーム 2
n

ボックス 3

実行結果:

上記の結果が得られます。同じ高さの空の要素が直接追加されていることがわかります。この要素はフローティングではないため、背景と同じであるため、背景が引き伸ばされます。実際、clear float を使用する原理はこれと同じで、背景もオープンにしてみます。上記では、clear の幅と高さを削除し、clear 属性を追加しています。

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

.clear{
clear:左; }

実行結果:

これははっきりと見えないかもしれません。透明なボックスにいくつかの単語を追加してみてください。

実行結果:

clear は clear:left を使用するためです。要約すると、次のようになります。クリアの左側には浮動要素がないため、新しい行に表示する必要があります。このようにして、写真の結果が実際には 1 つの要素によって支えられた背景であることがわかります。もちろん、それを実現する他の方法もあります。ここで重要なことは、フローティングを明確に説明することです:)