CSS の float の重要なプロパティの学習経験

重要な 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标签添加缩进，达到美观的效果。可是缩进时就会产生空格，也就是 。当给元素设置左浮动时，元素本身左浮动，剩余的空格会被挤到最后，也就是上文所说的文字环绕效果。但是，要记住一点， 和回车敲下的空格的效果略有不同。

5：float元素块状化

在为内联元素设置浮动属性之后，display属性由inline变成block。并且可以为内联元素设置宽高。使用float加width属性可以实现一些简单的固定宽度的布局效果。

6：float流体布局

 

　　6.1：单侧固定，右侧自适应的布局。

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左浮动+固定宽度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右边自适应宽度+margin-left<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    max-width</span>:<span style="color: #0000ff;">90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.left</span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;">left</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span> <span style="color: #800000;">.right</span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">    padding-left</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">19</span> }

 
　　6.2：DOM与显示位置不同的单侧固定

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右浮动+固定宽度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左边自适应宽度+margin-right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> right</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">  padding-left</span>:<span style="color: #0000ff;"> 10px</span>;
<span style="color: #008080;">16</span> }

 

 也就是说，html元素与显示在页面上的元素位置不相同。

　　6.3：DOM与显示位置相同的单侧固定 

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left-content"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>                 <span style="color: #008000;"><!--</span><span style="color: #008000;"> 左浮动+width100% </span><span style="color: #008000;">--></span>
<span style="color: #008080;">4</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>margin-right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>左浮动+固定宽度+margin-left负值<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  margin-left</span>:<span style="color: #0000ff;"> -200px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">  text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">18</span> }

　　6.4：智能布局

所谓智能布局，就是两栏都不需要设置宽度，宽度随内容自适应。

<span style="color: #008080;"> 1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #000000;">                float+margin-right+自适应宽度
</span><span style="color: #008080;"> 4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #000000;">                display:table-cell  ---IE8+;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">                display:inline-block   ---IE7+;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">                自适应宽度
</span><span style="color: #008080;"> 9</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;"> 9</span> }
<span style="color: #008080;">10</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  *display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> }

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;"> 9</span> }
<span style="color: #008080;">10</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  *display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> }

 

总结以下：

1：当一个元素设置float属性时，会使元素块状化。

2：float属性的创造初衷就是为了文字环绕效果而生的。

3：float元素会使父元素高度塌陷。

4：float元素会除去换行带来的空格。

5：使用float可以实现两栏自适应的布局。

更多深入了解CSS，可以关注一下张鑫旭大牛