CSSでfloat_html/css_WEB-ITnoseを理解する方法

CSS のレイアウトには float をよく使用します。一般的なものは float:left または float:right です。簡単に言うと、前者は左にフロートします（前にある非浮動要素に向かって左にフロートします。すべてフローティング要素の場合は、フローパターンに従って左から右にフローティングし、次の行に折り返します）収まらない場合）、後者は右にフローティングします（右にフローティング）。

上記は、CSS の float についての最も予備的な理解です。以下では、float について簡単な調査を行っていきます。

注意すべき点がいくつかあります:

1. フローティング要素は自動的にブロックレベルの要素に設定されます。これは、要素に対して display:block を設定するのと同じです (ブロックレベルの要素は幅と高さを設定できます)。ただし、インライン要素はできません)。

2. 浮動要素の背後にある非浮動要素の表示の問題。

3. 浮動方向が同じ複数の要素に対して流体配置を使用します。このとき、浮動要素の高さに注意してください。

4. すべてのサブ要素が浮動要素である場合の要素の高さの適応の問題。

float として定義されると、自動的にブロックレベル要素になります

ブロックレベル要素とインライン要素の違い:

簡単に言えば、ブロックレベル要素は排他的な行を占有し、幅は、高さとマージンは設定できますが、インライン要素は設定できません。排他的な行を占有し、幅、高さ、行間隔の設定は有効になりません。

共通のブロックレベル要素は次のとおりです: h1~h6、p、div、ul、table;

共通のインライン要素は次のとおりです:span、a、input、select など。

浮動要素の後の非浮動要素の問題

测试代码：    <div style="width: 500px; height: 500px; border: 1px solid blue; ">      <div style="float: left; width: 200px; height: 200px; border: 1px solid Aqua; margin: 10px 0pt 0pt 10px; ">        浮动DIV      </div>      <div style=" border: 1px solid green; width: 300px; height: 150px;">        跟在浮动元素(块元素)后边的DIV      </div>      <span style=" border: 1px solid green; margin: 0pt 0pt 0pt -50px;">        跟在浮动元素(行内元素)后边的span      </span>    </div>结果：

<br />结果如上图所示。<br />紧跟在浮动 div 后边的 div 背景以及边框被压在了底下，内容却没有；而 span 整体都在浮动 div 之上显示。 但是，并非在所有情况下都是这样。这里我们不得不考虑一下浏览器的兼容性问题,尤其是在天朝IE6依旧泛滥的大形势之下 :)<br />上述代码在IE6下面展现时：浮动元素没有压在非浮动<br />div之上，反而把span压住了。 <br />http://www.cnblogs.com/roucheng/

複数の平行な同じ方向の浮動要素の高さが一致しない問題

同じ方向の複数の浮動要素の高さが一致しない場合、予期しない結果が得られる可能性があります。その効果は、希望するレイアウトとは大きく異なります。

同じ方向の複数のフローティング要素は通常、流動的なレイアウトでレイアウトされ、1 行がいっぱいになると自動的に折り返されます。理論的な効果は次の図に似ています。

上記の状況は、多くの場合、私たちが期待する結果です。

しかし、通常、結果は次のようになります:

多くの場合、同様の事故が不注意で発生します。

配置が要素 7 に達すると、1 行を表示できなくなるため、改行されます。ただし、要素 5 は行頭よりもはるかに上位にあるため、ここでの改行は行の先頭からではなく、要素 5 から始まります。要素6。

子要素はすべてフローティング要素です。 高さの適応の問題

要素はフローティングされた後、ドキュメント フローから外れるため、親要素は要素に応じて自分自身を適応させることができません。

この問題には 2 つの最も一般的な方法があります:

1 つ目は、すべての浮動要素の後に追加する方法です:

6f6c91352da42dc7bf068872bd5965ba8dd61fb8b4f2b44bbc08844e17229215

クリア:

.Clearfix: after

{

可視性: 非表示

表示: ブロック;

フォントサイズ: 0;

コンテンツ: "." . ".". ".". ".". ".";

ar クリア: 両方;

高さ: 0;

*html .Clearfix

{

ズーム: 1;

}}

*：first-child+html.clearfix

{

{

{

{

{

{

{

{

{🎜{🎜🎜zoom

次に、適応する必要がある要素に class="clearfix" を追加します。