5つの質問で説明されたCSSフロート

CSSの "Floats"（フローティング要素）は使い方が簡単ですが、一度使われると、周りの要素に与える影響が予測できないことがあります。あなたがこれまでに親指の痛みのように突き出て近くの要素や浮遊物を消すという問題に遭遇したことがあれば、もう心配しないでください.

この記事では、浮遊要素の専門家になるのに役立つ5つの基本的な質問について説明します。.

1. どの要素が浮かばない?
2. 浮いたときに要素に何が起こるか?
3. "Floats"の兄弟はどうなりますか?
4. フロートの親に何が起こるか?
5. どのように "フロート"をクリアするのですか?

TL; drへのアプローチを採用した読者のために、投稿の終わり近くにまとめがあります.

1.浮遊しない要素?

あ 絶対の または 固定配置要素 浮かぶことはありません。それで、次に動かないフロートに遭遇したら、それが入っているかどうかチェックしてください。 位置：絶対 または 位置：固定 それに応じて変更を適用する.

それが浮かぶとき要素に何が起こるか?

要素が "float"とタグ付けされているとき、それは基本的にそれが出るまで左か右のどちらかに走ります そのコンテナ要素の壁に当たる. あるいは、それはそれまで実行されます すでに同じ壁に当たっている別の浮遊要素に当たる. それらはスペースがなくなるまで並んで積み重なり続け、そしてより新しい入って来るものは下に移動されます.

浮遊要素も 要素の上に行かない 前 それ コードでは、コーディングする前に考慮する必要があるもの “浮く” 後に 浮遊させる側の要素.

浮遊状態になっている要素の種類に応じて、浮遊要素にはさらに2つのことが起こります。

（1） インライン要素はブロックレベル要素になります 浮いているとき.

高さと幅をフローティングに割り当てることができる理由 スパン? これは、浮遊時にすべての要素が値を取得するためです ブロック そのために 表示 属性（インラインテーブル 取得します 表）それらをブロックレベル要素にする.

（2） 幅が指定されていないブロック要素は、浮動すると内容に合わせて縮小されます。.

通常、ブロック要素にwidthを指定しないと、その幅はデフォルトの100％になります。しかし、浮遊すると、それはもはや当てはまりません。ブロック要素のボックスは、その内容が表示されるまで縮小されます。.

3.フロートの兄弟たちに何が起こるか?

あなたが要素の束の中で要素をどのように振る舞うかについて心配しないで浮かべることにしたとき、その振る舞いは予測可能でありそして左または右に動くでしょう。本当に考えるべきことは それ以降の兄弟はどのように振る舞うのか.

「フロート」は全世界で最も思いやりのある従順な兄弟姉妹です。彼らは浮遊する要素を収容するために彼らの力ですべてをするでしょう.

の テキストとインライン要素 単純に "フロート"の道を作ると "フロート"を囲む 定位置にあるとき.

の ブロック要素 さらに一歩進んで 「フロート」の周りに身を包む たとえそれが「フロート」のためのスペースを作るために彼ら自身の子供の要素を追い出すことを意味するとしても、寛大に.

実験でこれをチェックしましょう。以下は青いボックスで、それがいくつかの子要素を持つ同じサイズの赤いボックスです.

それでは、青い四角を浮かせて、赤い四角とその子に何が起こるか見てみましょう。.

赤い箱が青い箱を受け入れるのをやめれば、すべてうまくいくでしょう。 オーバーフロー：非表示.

追加したとき オーバーフロー：非表示 フロートを包んでいた要素には、そうするのをやめます. 赤い箱がどのように振る舞うかを以下で見てください オーバーフロー：非表示.

4.フロートの親に何が起こるか?

両親は、自分の左右の境界から出てはいけないということ以外は、「フロート」の子供たちについてあまり気にしません。.

通常、高さが指定されていないブロック要素は、その子要素に対応するように高さが増加しますが、 "Float"の子供には当てはまりません。. 「フロート」のサイズが大きくなっても、その親はそれに応じて高さを大きくしません。. これもを使用して解決することができます オーバーフロー：非表示 親に.

5.「フロート」をクリアする方法?

私はすでに使用して言及した オーバーフロー：非表示 "Float"の後に他の要素のための適切なスペースを作成しながら、親が高さ方向に浮遊している子を収容できるようにし、兄弟が "Float"をラップしないようにする.

そしてそれは、あなたが要素を妥協することなく「フロート」の近くで生きるようにする方法です.

要素が "Float"兄弟の近くに配置されないような方法もあります。を使って クリア 属性を使用すると、要素を「フロート」の近くに置かないようにできます。.

クリア：左クリア：そうです。クリア：両方 

左 valueは、要素の左側にあるすべての "Floats"を消去します。 右, そして両側で 両方. この クリア あなたの都合の良いように、属性は兄弟、空のdivまたは擬似要素で使われることができます.

概要

1. 絶対/固定要素は浮動しません.
2. 「フロート」は要素の上にはありません 前 コードでそれを.
3. コンテナに十分なスペースがない場合は、「フロート」が押し下げられます.
4. すべての「フロート」はブロックレベルの要素になります.
5. 「フロート」で幅が指定されていない場合は、内容に合わせて縮小されます。.
6. "Float"の後の兄弟はそれらを囲む（インラインとテキスト）か、それらをラップする（ブロック）.
7. 要素が "Float"をラップしないようにするには、次のようにします。 オーバーフロー：非表示.
8. 「フロート」の両親はフロートに合うようにその高さを増やさないでしょう.
9. "Float"のように親の身長を上げるには、つぎのようにします。 オーバーフロー：非表示 （またはで空の兄弟を作成します。 クリア その後）
10. 要素が「フロート」の近くにあるのを防ぐには、 クリア 属性.