CSS 属性フロートの学習体験

全文参照: http://www.linzenews.com/program/net/2331.html

重要な CSS 属性 float を見てみましょう。

以下のコンテンツは次のサブセクションに分かれています:

1: float 属性

2: float 属性の特徴

2.1: フロートテキストラッピング効果

2.2: float の親要素が高度に折りたたまれています

3: float をクリアする方法

3.1: htmlメソッド

3.2: CSS疑似要素メソッド

4: デスペースフロート

5: ブロック float 要素

6: フロート流体レイアウト

6.1: 片側固定

6.2: DOMと表示位置が異なる片側固定

6.3: 同じDOMと表示位置での片側固定

6.4: スマートレイアウト


1: float 属性

フロートは、名前が示すように、浮遊することを意味します。しかし、CSSではfloatとして理解されます。 float には 4 つの属性があります。 リーリー

最も一般的に使用される 2 つの属性値は、左フローティングと右フローティングです。以下の共有では、左フローティングのみを例として使用します。他のフローティング属性値の原理は、左フローティングの原理と同じです。

2: float 属性の特徴

2.1: フロートのテキスト折り返し効果

フローティングの本来の目的はテキストの折り返し効果です。

以下のコードとデモをご覧ください。

リーリー リーリー

content 要素は左フローティングに設定されており、これにより div 要素がドキュメント フローから切り離され、テキストがその周囲に表示されます。

2.2: float の親要素は高度に折りたたまれています

div 要素を例として取り上げます。 div 要素の高さはコンテンツによって自動的に拡張されます。つまり、高さは内容と同じくらい高いのです。ただし、内部要素に float 属性を設定すると、親要素の高さが崩れてしまいます。コードと例は次のとおりです。
リーリー

以下、折りたたみ後のCSSとデモ。
リーリー

子要素が float に設定される前後で発生した変更を確認できます。

3: float をクリアする方法

それでは、内部要素をフローティングにする場合、親要素の高さの崩壊をどのように回避するかが問題になります。

高さを親要素に直接設定すれば十分ではないかと考える学生もいるでしょう。これは実際には不可能です。親要素の高さが固定されていると、後から内容を追加したい場合にCSSコードを修正する必要があり、非常に面倒だからです。
親要素の高さ崩れの問題を解決するには2つの方法があります。

3.1: 親要素の一番下に空の div を追加し、clear:both 属性を追加します。

コードは以下の通りです。

リーリー リーリー リーリー

3.2: 親要素はその後の疑似クラスを設定します。 リーリー リーリー

4: float 要素からスペースを削除します

とはどういう意味ですか?日常のコーディングでは、HTMLのコーディング標準に準拠するため、HTMLタグにインデントを加えて美しく仕上げます。ただし、インデント、つまり   を行うとスペースが生成されます。要素に左フローティングを設定すると、要素自体は左にフローティングされ、残りのスペースは最後まで圧縮されます。これが、前述の

テキストの折り返し効果です。 ただし、  の効果は Enter キーを押した場合とは若干異なることに注意してください。

5: ブロック float 要素

インライン要素にフローティング属性を設定すると、表示属性がインラインからブロックに変わります。また、インライン要素の幅と高さを設定できます。 float 属性と width 属性を使用すると、単純な固定幅レイアウト効果を実現できます。

6: フロート流体レイアウト

6.1: 片側が固定、右側がアダプティブレイアウト。 リーリー リーリー

6.2: DOMと表示位置が異なる片側固定 リーリー リーリー

つまり、html 要素はページに表示される要素と同じ位置にありません。

6.3: 同じDOMと表示位置での片側固定 リーリー リーリー

6.4: スマートなレイアウト

いわゆるスマート レイアウトとは、2 つの列の幅を設定する必要がなく、幅がコンテンツに適応することを意味します。
リーリー リーリー リーリー

要約すると:

1: 要素が float 属性に設定されている場合、要素はブロック状になります。

2: float 属性はもともとテキストの折り返し効果のために作成されました。

3: Float 要素により、親要素の高さが崩れます。

4: Float 要素は改行によって生じたスペースを削除します。

5: float を使用して 2 列のアダプティブ レイアウトを実現します。