CSSでfloat_html/css_WEB-ITnoseを理解する方法-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:30:10

オリジナル

1013 人が閲覧しました

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/

ログイン後にコピー