HTML連載45-浮動元素脫標、排序規則、貼靠現象

1、浮動元素脫標

1.什麼是浮動元素脫標

脫標：脫離標準流。

當某一個元素浮動以後，那麼這個元素看上去就像被從標準流中刪除了同樣

2.浮動元素脫標以後有什麼影響

若是前面一個元素浮動了，然後面的一個元素沒有浮動，那麼這個時候前面的一個元素就會蓋住後面的一個元素。先後若是反了沒事

舉例：

 

<style>

        .box1{

            float:left;

            width:50px;

            height: 50px;

            background-color: red;

        }

        .box2{

            /*float:left;*/

            width:100px;

            height:100px;

            background-color: black;

        }

.........省略代碼..........

<div class="box1"></div>

<div class="box2"></div>

 

2、浮動元素排序規則

1.浮動元素排序規則

（1）相同方向上的浮動元素，先浮動的元素會顯示在前面，後浮動的元素會顯示後面；

  

      .box3{

            width:50px;

            height:50px;

            background-color: yellow;

            float:left;

        }

        .box4{

            width:100px;

            height:100px;

            background-color: purple;

            float:left;

        }

..........省略代碼.........

<div class="box3"></div>

<div class="box4"></div>

 

（2）不一樣方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動；

 

        .box3{

            width:50px;

            height:50px;

            background-color: yellow;

            float:left;

​

        }

        .box4{

            width:100px;

            height:100px;

            background-color: purple;

            float:left;

        }

        .box5{

            width:150px;

            height:150px;

            background-color: blue;

            float:right;

        }

        .box6{

            width:200px;

            height:200px;

            background-color: black;

            float:right;

        }

..........省略代碼...........

<div class="box3"></div>

<div class="box4"></div>

<div class="box5"></div>

<div class="box6"></div>

 

（3）浮動元素浮動以後的位置，由浮動元素浮動以前在標準流中的位置來肯定。

       .box3{

            width:50px;

            height:50px;

            background-color: yellow;

            float:left;

​

        }

        .box4{

            width:100px;

            height:100px;

            background-color: purple;

            float:left;

        }

        .box5{

            width:150px;

            height:150px;

            background-color: blue;

            /*float:right;*/

        }

        .box6{

            width:200px;

            height:200px;

            background-color: black;

            /*float:right;*/

        }

        .box7{

            width:250px;

            height:250px;

            background-color: black;

            float:right;

        }

.........省略代碼...........

<div class="box3"></div>

<div class="box4"></div>

<div class="box5"></div>

<div class="box6"></div>

<div class="box7"></div>

 

總結：（1）連續的浮動，是放在一行上搞；連續的非浮動，正常標準流搞

（2）浮動+非浮動，浮動是放在一行上搞，非浮動就好像浮動不存在同樣正常標準流搞；（3）非浮動+浮動：非浮動正常標準流搞，浮動是另起一行，放在一行上搞。

2、浮動元素的貼靠現象

 

   

     .father{

            width: 400px;

            height: 400px;

            border:1px solid black;

            float:left;

        }

        .hezi1{

            width: 50px;

            height: 300px;

            background-color: red;

            float:left;

        }

        .hezi2{

            width: 50px;

            height: 100px;

            background-color: blue;

            float:left;

        }

        .hezi3{

             width: 250px;

             height: 100px;

             background-color: green;

            float:left;

         }

.........省略代碼.........

<div class="father">

    <div class="hezi1"></div>

    <div class="hezi2"></div>

    <div class="hezi3"></div>

</div>

 

咱們把.father中的寬度減少到350

再減少到200

咱們從中能夠看出後面的盒子會往前依次貼，直到怎麼貼不住了，只能溢出了。

4、源碼：

D123_FloatYuanSuOderAndAttach.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D123_FloatYuanSuOderAndAttach.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）

3.博客園：https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公衆號：傅里葉變換，我的帳號，僅用於技術交流，後臺回覆「禮包」獲取Java大數據學習視頻禮包