CSSのfloatについて詳しく解説-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのfloatについて詳しく解説

高洛峰

Mar 17, 2017 pm 12:47 PM

float は、おそらく CSS3 より前の Web ページのレイアウトで最も一般的に使用されていた属性です。お互いに同意しないという理由だけで float するコードをよく見かけます。半分天使で半分悪魔であるこの属性について詳しく見てみましょう。。

この記事は、MOOC.com のマスター、Zhang Xinxu のフロートビデオを読んだ後の要約と拡張された使用法です。このビデオは、最初に読んだときは退屈ですが、注意深く読んだ後はさらに退屈であることがわかります。。。。。。しかし、落とし穴に遭遇した後にもう一度読むと、一言一言が貴重な良心のビデオに出会うでしょう。早速、始めましょう:

1. float の起源

float の元のデザインは、テキストの折り返し効果を作成することであり、それがデザイナーが私たちに望んでいたことでした。

2.float パラメータ

float 属性には 3 つのパラメータ値があります:

left: 要素が左側に浮動することを示します。

right: 要素が右に移動することを示します。

none: Object はフロートせず、標準のドキュメントフローに従います。

3.効果表示 (float:leftを例にします。float:rightの場合は位置の違いだけです)

<style> p{
    height: 20px;}
    .d1{
        width: 50px;
        background: hsl(100,50%,80%);
    }
    .d2{float: left;
        width: 100px;
        background: hsl(150,50%,80%);
    }
    .d3{
        width: 250px;
        height: 100px;
        background: hsl(10,50%,80%);
    }
    .d4{float: left;
        width: 300px;
        background: hsl(250,50%,80%);
    }
    span{
        margin-right: 3px; 
        border-right: solid 1px #ccc;
        background-color: hsl(60,50%,80%);
    }
    .s3{
        float:left;
    }</style> <body> <p class="d1">p1</p><p class="d2">p2有float</p><p class="d3">p3</p><span class="s1">span1</span><span class="s2">span2</span><span class="s3">span3有float</span><p class="d4">p4有float</p><span class="s4">span4 </span></body>

ログイン後にコピー

ブラウザの幅が足りない場合:

详解CSS中float浮动

ブラウザの幅が十分に長い場合:

详解CSS中float浮动

次の結論を導き出すことができます:

フローティング要素がブロック要素の場合、その次の隣接要素 (フローティングではない) はブロック要素と同じになります。ブロック要素。フローティング要素が重なっている場合は、フローティング要素が上になります。次に隣接する要素がインライン要素の場合、フローティング要素の後に続きます。

フロート要素がインライン要素の場合、ブロック要素であれば隣の要素（フロートされていない）は移動しませんが、幅が足りないと重なりが発生します。次に隣接する要素がインライン要素の場合は、フローティング要素の後に続きます。

4.フロートの破壊性

フロートに設定された要素はドキュメントフローから切り離され、親要素の高さが「折りたたまれ」ます。

<p style="border:3px dashed #ddd">
    <p>我还没设置float属性</p></p>

ログイン後にコピー

详解CSS中float浮动

<p style="border:3px dashed #ddd">
    <p style="float:left">我设置了float属性</p></p>

ログイン後にコピー

详解CSS中float浮动

5.Floating Wrapperity

これはFloatなしのp

です

详解CSS中float浮动

これはフロート付きのPです

详解CSS中float浮动

6. スペースを削除するためのフローティング

これは上記のコードと結論で示されました。簡単に言えば、通常のドキュメントフローでは、フローティングによって上下に隙間が存在します。このギャップにより、2 つの要素をシームレスに組み合わせることができ、上部と下部の要素間のギャップも解消されます。

详解CSS中float浮动

7.フローティングをクリアする影響

7.1 clear属性を使用します

a. <p style="clear:both;"></p>を最後の子タグとして配置し、親タグでもある親タグに配置します。最も簡単なクリア方法フローティング方法ですが、推奨されません。

りー

　　详解CSS中float浮动

　　b.after伪元素和zoom

　　after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素

<style>.myp{
        border:3px dashed #ddd    }
    .myp:after{
        content: "";
        clear:both;
        display: block;    
    }</style><body><p class="myp">
    <p style="float:left">我设置了float属性</p></p></body>

ログイン後にコピー

详解CSS中float浮动

但是ie6/7无法识别伪元素after，就得用zoom方式，例：

.myp{
        border:3px dashed #ddd;
　　　　　zoom:1
    }
　　7.2 
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：

ログイン後にコピー

<style> 
    .myp{
        border:3px dashed #ddd;
        overflow: hidden;
    }</style> <body> <p class="myp">
    <p style="float:left">我设置了float属性</p></p></body>

ログイン後にコピー

详解CSS中float浮动