15-フローティング

フローティング
フローティングはcssの中で最もレイアウトの多い属性であり、重要な属性でもある.
float:浮動の意味を表す.4つの値があります.

none:浮動しないことを示し、デフォルト

left:左フローティング

を表す

right:右フローティング

を表す
例を見て
html構造:

 <div class="box1">div>
 <div class="box2">div>
 <span>    span>

cssスタイル:

.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

3つの要素が並んで表示されますbox 1とspanは左フローティングなので、隣接しています.この現象はエッジに貼られています.box 2箱は右に浮動しているので、右側に寄りかかっています.
 
では、フローティングをマスターしたいなら、その4つの特性を知っておく必要があります.
1.フローティング要素の脱標
2.フローティング要素同士がくっつく
3.フローティングの要素は「サブ周囲」効果
4.収縮の効果
 
フローティングエレメント
脱標:標準ドキュメントフローから離脱しました
 
例をみる

     <div class="box1">  div>
     <div class="box2">  div>
     <span>   span>
     <span>   span>

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

赤い箱は黄色の箱を押して、1行の中のspanラベルは意外にも幅を設定することができます.
理由1:赤はフローティングを設定し、黄はフローティングを設定していない.赤は標準ドキュメントフローから離れているが、実際にはページに位置を占めていない.このとき、ブラウザは黄が標準ドキュメントフローの最初の箱だと考えている.ページの最初の位置にレンダリングされます.この現象には、フローティング要素が「浮かび上がった」という呼び方もありますが、私は皆さんにそう呼ぶことをお勧めしません.
理由2:すべてのラベルがフローティングに設定されると並べて表示され、行内、ブロック要素を区別せずに幅の高さを設定できる
フローティングエレメントが互いに貼り付けられる
例をみる
html構造

    <div class="box1">1div>
    <div class="box2">2div>
    <div class="box3">3div>

cssスタイル

        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

効果の検出:
もし父の要素が十分な空間があれば、3兄は2兄に寄りかかって、2兄は1兄に寄りかかって、1兄は辺に寄りかかっています.十分な空間がなければ、1兄に寄りかかって、もう1兄に寄りかかる十分な空間がなければ、自分でそばに寄りかかっています.
 
フローティング要素のワードサイズ効果
html構造:

<div>
        <img src="./images/  1.png" alt="">    
    div>
    <p>
        123                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
    p>

 
cssスタイル:

       *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }

効果発見:いわゆるワードサイズ効果は、divが浮動し、pが浮動しない場合、divはp、divの階層を覆って向上するが、p中の文字は隠されず、このときワードサイズ効果を形成する.
フローティング要素コンパクト効果
収縮:フローティング要素.widthが設定されていない場合は、自動的に文字の幅に縮小します(これは行内要素に似ています)
html構造:

<div>
     alex
div>

cssスタイル:

div{
    float: left;
    background-color: red;
}

 
浮動については、初期には必ず一つの原則に従わなければならない.永遠に箱が単独で浮動するのではなく、浮動するには一緒に浮動しなければならない.また、フローティングがあるので、必ずフローティングをクリアし、
 
なぜフローティングをクリアするのか
ページレイアウトの場合、各構造の親要素の高さは、一般的に設定されません.(なぜですか?)
皆さんは、もし私の第1版のページの書き終わったら、とても爽やかで、突然1ヶ月ぶりに、ボスはページのあるエリアについて、私は内容を追加しなければならないと言って、あるいは私は画像を縮小しなければならないと思っています.このような需要は仕事の中で非常によく見られる.彼を殴りたいですね.では、この时、フロントエンドのシロとして、必ずどこかに内容を加えて、写真を変えて、父の箱の高さを修正します.その問題が来て、開発効率に影響しませんか?答えは肯定的だ.
効果を確認します.
html効果:

<div class="father">    
        <div class="box1">div>
        <div class="box2">div>
        <div class="box3">div>

 div>

  <div class="father2">div>

cssスタイル:

       *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*                */

            /*      ，           */
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

親ボックスに高さを1つ与えないと、フローティングサブエレメントは親ボックスの高さを埋めません.father 2の箱は最初の位置に走り、ページレイアウトに影響します.
では、フローティング要素は確かに私たちのページ要素が並んでいる効果を実現することができることを知っています.これはそのメリットであり、同時にページレイアウトの大きな乱れをもたらしています!!!フローティングをクリアします
まあまあです.フローティングをクリアする方法はいくつかありますが、ここでは4つ紹介します.

親ボックスに高さ

を設定

clear:both

擬似要素消去法

overflow:hidden

親ボックスの高さを設定する
この方法は、ページの高さを固定し、サブ要素を並べて表示するレイアウトが一般的に使われているコードについて説明します.たとえば、ナビゲーションバー
clear:both
clear:クリアという意味です.
3つの値があります.
left:現在の要素の左側にフローティング要素は許可されていません
right:現在の要素の右側にフローティング要素は許可されていません
both:現在の要素の左右にフローティング要素は許可されていません
フローティング要素の後ろに空のdivを追加し、その要素はフローティングではなくclear:bothを設定します.
html構造:

<div>
        <ul>
            <li>Pythonli>
            <li>webli>
            <li>linuxli>
            
            
            
            <div class="clear">div>
            
        ul>
        
div>
<div class="box">
        
div>        

cssスタイル

       *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

 
ぎじげんそせいぎょほう
フロートサブエレメントの親ボックス、すなわちフロートしないエレメントにclearfixのクラスを追加し、設定します.

.clearfix:after{
    /*        */
    content: '.';
    clear: both;
    display: block;
}

新浪のトップページは偽元素の除去法の書き方を推薦します

    
            /*             */
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

        

overflow:hidden(常用)
overflowプロパティは、コンテンツが要素ボックスからオーバーフローしたときに発生することを規定します.
説明:
このプロパティは、オーバーフロー要素コンテンツ領域のコンテンツがどのように処理されるかを定義します.値がscrollの場合、必要かどうかにかかわらず、ユーザーエージェントはスクロールメカニズムを提供します.したがって、要素ボックスにすべての内容を置くことができても、スクロールバーが表示される可能性があります.
 
5つの値があります.
値
説明
visible
既定値.コンテンツはトリミングされず、要素ボックスの外に表示されます.
hidden
コンテンツはトリミングされ、残りのコンテンツは表示されません.
scroll
コンテンツはトリムされますが、ブラウザにはスクロールバーが表示され、残りのコンテンツが表示されます.
auto
コンテンツがトリムされると、ブラウザにスクロールバーが表示され、残りのコンテンツが表示されます.
inherit
親要素からoverflowプロパティを継承すべき値を指定します.
overflow:hiddenクリアランス法に徐々に進化した.
実はBFCエリアです.
BFCを深く理解する
BFCを知る前にBoxとFormatting Contextについて
(1)B:BOXは箱であり,ページの基本構成要素である.Inline、block、inline-blockの3種類のBOXに分かれています
(2)FC:Formatting ContextはW 3 Cの仕様の一つである.ページ内のレンダリング領域であり、サブエレメントがどのように配置されるか、他のエレメントとの関係と相互作用を決定するレンダリングルールがあります.
一般的なFormatting ContextにはBlock fomatting context(BFCと略称)とInline formatting context(IFCと略称)があります
BFC定義
BFC(Block formatting context)は「ブロックレベルフォーマットコンテキスト」に直訳される.独立したレンダリング領域であり、Block-level boxのみが参加し、内部のBlock-level Boxがどのようにレイアウトされ、この領域の外部とは無関係であることを規定しています.
BFCレイアウト規則

1.   Box      ，        。

2.Box        margin  。     BFC     Box margin     

3.     margin box   ，     border box      (          ，    )。          。

4.BFC      float     。

5.BFC               ，                  。     。

6.  BFC    ，         

それらの要素はBFCを生成します

1.   

2.float    none

3.position absolute fixed

4.display inline-block

5.overflow  visible

ここまでです.浮動の実現について並べて、浮動をクリアする4つの使い方を紹介しましたので、ぜひ覚えておきましょう.