CSSのfloat属性とposition:absoluteの比較

ページレイアウトではfloatとposition:absoluteのどちらを使用するのが良いですか?という疑問を持つ人は多いと思います。レイアウトなので、私がよく使うfloatを使うのが良いでしょう。このフロートはクリアできますが、通常は全体のレイアウトには影響しません。 一般に、これはレイアウトに制約がありません。特別な位置決めやフローティング レイヤーを実行したい場合は、これを使用することを検討できます。通常のページ レイアウトの場合、個人的には FLOAT

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

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

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

class="box2 >

CSS コード:


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


.boxBg{
margin: 0 auto;

width:500px;

height:200px;

border:2px Solid #ccc

} .box1{ width:100px;

height:50px;

background -color:赤
}
.box2{
幅:100px;
高さ:50px;
背景色:青
}
.box3{
幅:100px;
高さ:50px;
背景色:緑
}


実行結果:




p はブロックレベルの要素なので、ボックスは縦に配置されます。実際の運用では、フレームを水平に配置する必要があることがよくあります。これを行うには 2 つの方法があります。最初のものは表示されます:inlin-block;


コードをコピーします

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

.boxBg{ margin: 0 auto;

width:500px;

height:200px;

border:2px Solid #ccc

} .box1{ 幅:100px;

高さ:50px;

背景色:赤;
表示:インラインブロック
}
.box2{
幅:100px;
高さ:50px;
背景-色:青;
表示:インラインブロック
表示:インライン-block .box3{ width:100px; display: inline-block


真ん中については、ギャップの本質的な理由は要素間の空白に遡ります。 , そのため、親要素に fone-size のサイズを設定することで、空白のサイズを調整できます。


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


.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px Solid #ccc;
font-size:34px;
}

font-size:34px に変更すると、隙間が広くなります。

実行結果:

同様に、ギャップを削除したい場合は、コード font-size:0;

をコピーする必要があります。 コードは次のとおりです:

.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px Solid #ccc;
font-size:0
}

実行結果:

超便利希望のレイアウトを達成すると、ボックス内のテキストも消えました。これは、テキストのサイズがギャップに影響を与えることも証明しています。子要素でリセットするだけです。もちろん、今日の焦点はそこではありません。同じ効果 float:left; も簡単に実現できます。 }

.box1{

幅:100px; 高さ:50px; 背景色:赤;

float:left

}
.box2{
幅:100px;
高さ:50px;
背景色:青;
float:left
}
.box3{
width:100px;
height:50px;
background-color:green;
float:left
}



実行結果:




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


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

実行結果:




インラインブロックを使用すると結果はどうなりますか? 🎙 }
.box1{
幅:100px;
高さ:100px;
背景色:赤;
表示:インラインブロック
}
.box2{
幅:100px;
高さ:50px;
背景色: blue;
display:inline -block
}
.box3{
width:400px;
height:50px; background-color:green;

display:inline-block

}

実行結果:

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

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

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

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

.box3{
width:100px;
height:50px;
background-color:green;
}

実行結果:

理由ボックス 3 のテキスト ボックス 1 で覆われずに、下に表示されますか?次に、コードを見て、画像を見てください

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

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

実行結果:

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

フローティング要素はブロックのスペースを占有しないため、ボックス 3 は親コンテナの幅 500px の 100% ですが、フローティング要素は他のスペース、つまりラインボックススペースを占有します。テキストで占められています。

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

この場合、3 つのボックスを同じ幅にしたい場合は、box 3 width:300px;

のコードをコピーするだけです。コードは次のとおりです:

.box3{
width :300px;
height:50px;
background -color:green;
}

実行結果:

基本的なフローティングについての説明は終わりましたので、フローティングの使い方は簡単ですが、問題点について話しましょう。 , 実際には多くの問題が発生します。例:

実行結果:

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

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

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

.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left

実行結果:

わかりました、次は見てみましょう!背景とフレームを同じ高さにする方法について説明します。最初の方法は、背景の高さをフレームと同じになるように直接設定することです。もちろん、これは重要ではありません。フロート。まず、例を見てみましょう:

コードをコピーします

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

実行結果:




上記の結果は結果を達成しました、それが直接追加されたことは明らかです 同じ高さの空の要素 この要素はフローティングではないため、背景と同じであるため、背景が引き伸ばされます。実際、float をクリアする原理はこれと同じで、背景も開いてみます。上記の clear の幅と高さを削除し、clear 属性を追加します


コードをコピーします
コードは次のとおりです。以下:


.clear{
Clear: left;
}

実行結果:

これはまだ明確ではないかもしれません。クリアボックスにいくつかの単語を追加してみてください

実行結果:

clear は clear:left を使用するため、要約すると、clear の左側に浮動要素を置くことはできないため、新しい行に表示する必要があります。このようにして、画像の結果が実際には 1 つの要素によってサポートされている背景であることがわかります。もちろん、それを達成する他の方法もあります。ここで重要なのは、フローティングを明確に説明することです:)

。

以上がCSSのfloat属性とposition:absoluteの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。