float と Clear floats_html/css_WEB-ITnose を使用したレイアウト

CSS には、通常のフロー (静的)、フローティング (float)、絶対配置 (絶対、固定) の 3 つの基本的な配置方法があります。 HTML 要素はデフォルトで通常のフロー形式でレイアウトされ、フローティングは HTML レイアウトで最も一般的に使用される配置方法です。 まずフロートの位置決めの動作について説明し、次にフロートをクリアする必要があるシナリオといくつかの代替案を紹介します。

Float

フロート要素は、外側の境界がコンテナーの端または別の要素に触れるまで、左/右にオフセットされます。 フローティングすると、要素がドキュメント フローから外れ、後続の要素がレイアウトされると、前のフローティング要素は存在しないかのように表示されます。

右側に十分なスペースがない場合、フロート要素は十分なスペースができるまでドロップされます (ラップ)。 浮遊要素の高さが異なる場合、落下中に特定の位置で動けなくなる可能性があります。

フロートのクリア

フローティングでは要素がドキュメント フローから取り出されますが、絶対配置とは異なり、後続の要素はフロート要素用のスペースを確保します。 これは、float の本来の目的の 1 つであるテキストの折り返しの効果につながる可能性があります。

行の折り返しを停止したい場合は、その行にクリアフロート (clear) を設定できます。これには、 left 、 right 、 Both 、 none の 4 つの値があり、フローティング要素に隣接しない方向を示します。 CSS レンダラは、margin-top を追加することでこの効果を実現します。例:

フローティングコンテナ

しばらくフロントエンドを書いていると、フローティング要素が親のスペースを占有していないことがわかるでしょう。容器。 これにより、親コンテナのサイズがゼロになります。もちろん、親コンテナの境界線と背景は無効になります。

しかし、どの要素のフロートもクリアできないことがわかりましたか。効果？現時点では、追加の空要素が必要で、clear:both を設定します。

この効果は、Bootstrap が clearfix クラスを提供できる追加要素を通じて実現します。 Bootstrap のこの空の要素は次のように記述できます:

<div class="clearfix"></div>

代替ソリューション

コンテナも浮かせる

しかし、強迫性障害の患者はこれを好まないはずです。 extra div、代替手段 コンテナもフローティングにする方法です。 もちろん、これにより後続の要素のレイアウトもフローティングになるため、一部の Web サイトではほぼすべての要素がフローティングになります。

コンテナのオーバーフローを設定する

コンテナのオーバーフローを自動または非表示に設定しても、効果を得ることができます。 ただし、オーバーフローを設定すると、望ましくない動作が発生する場合があります。

CSS 疑似要素

余分な空の要素を避けるために、CSS を使用してコンテナに疑似要素を追加できます:

.clear:after {    content: ".";    height: 0;    visibility: hidden;    display: block;    clear: both;}

IE6 以下 ブラウザでは、高さを 1% に設定する必要もあります (IE のバグ)。

実際、原理は空の要素と同じです...ただし、この要素が実行時に生成される点が異なりますが、コードは依然としてきれいです。 display:block を使用する理由は、clear の原則が margin-top を自動的に追加することであり、この属性は inline 要素には影響を与えないためです。