CSS浮動的特性

時間  2019-12-07
標籤 css 浮動 特性 欄目 CSS 简体版
原文   原文鏈接

浮動具備如下特性：css

  • 蓋不住的文本
  • 浮動元素後面不是塊級元素，後面的元素將會和它並排（除非設置了元素的寬度，而且屏幕放不下時將會換行）
  • 浮動元素的上一個元素若是沒有浮動，浮動只在當前行浮動；當浮動遇到浮動，它們將在一行排序，除非沒有位置了
  • 當元素設置定位值爲absolute、fixed時，浮動將被忽略
  • float引發父元素高度塌陷
  • 浮動元素會被後一個元素的margin-top影響

蓋不住的文本

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            float:left;
            background-color: pink;
        }
        .item2{
            background-color: #58d3e2;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>

clipboard.png

能夠看到，item2的div除了文本，其餘的內容都看不見了，由於它跑到item1下面了。爲何文字不會被浮動的元素蓋住呢？由於浮動的本質就是用來實現文字環繞的。spa

從上面也能夠得出：浮動元素後面的塊級元素會佔據浮動元素的位置，而且浮動元素老是在標準流元素上面。設計

浮動元素後面不是塊級元素，後面的元素將會和它並排（除非設置了元素的寬度，而且屏幕放不下時將不會換行）

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            float:left;
            background-color: pink;
        }
        .item2{
            display: inline-block;
            background-color: #58d3e2;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>

clipboard.png

浮動元素的上一個元素若是沒有浮動，浮動只在當前行浮動；當浮動遇到浮動，它們將在一行排序，除非沒有位置了

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            background-color: pink;
        }
        .item2{
            float:left;
            background-color: #58d3e2;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>

clipboard.png

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           width:400px;
           height:100px;
           float: left;
       }
        .item1{
            background-color: pink;
        }
        .item2{
            background-color: #58d3e2;
        }
        .item3{
            background-color: #61dafb;
        }
        .item4{
            background-color: #e9203d;
        }
    </style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>

clipboard.png

能夠設置width爲百分比來實現自適應3d

div{
           width:25%;
           height:100px;
           float: left;
       }

clipboard.png

當元素設置定位值爲absolute、fixed時，浮動將被忽略

<style>
        body,div{
            margin:0;
            padding:0;
        }
       div{
           position: absolute;
           float: left;
           width:100px;
           height:100px;
           border: 1px solid red;
       }
    </style>
 <div class="item1">浮動趕上定位</div>

clipboard.png

行內元素使用浮動之後生成一個塊框，所以它就可使用width，height，margin，padding等屬性了

<style>
        body,div{
            margin:0;
            padding:0;
        }
       [class^='item']{

           float: left;
           width:100px;
           height:100px;
           line-height: 100px;
           text-align: center;
       }
        .item1{
            float: left;
            background-color: pink;
        }
        .item2{
            display: inline-block;
            background-color: #58d3e2;
        }

    </style>
<span class="item1">item1</span>
<div class="item2">item2</div>

clipboard.png

float引發父元素高度塌陷

在網頁設計中，很常見的一種狀況是給內容一個div做爲包裹容器，而這個包裹容器不設置高度，而是讓裏面的內容撐開包裹容器的高度。若是不給子元素設置浮動的話，並不會出現什麼問題，而一旦給子元素設置了浮動，父元素會沒法自適應浮動元素的高度，會出現父元素高度爲0，從而背景色什麼的都不能展現了。緣由是：code

由於沒有預先設置div高度，因此div高度由其包含的子元素高度決定。而浮動脫離文檔流，因此子元素並不會被計算高度。此時的div中，至關於div中子元素高度爲0，因此發生了父元素高度塌陷現象。排序

<style>
        body,div{
            margin:0;
            padding:0;
        }

        .item{
            float: left;
            width:100px;
            height:100px;
            background-color: pink;
        }

    </style>
   <div class="box">
       <div class="item"></div>
   </div>

clipboard.png

解決辦法，ip

1.給父元素增長「overflow:hidden"文檔

固然也能夠是"overflow：auto"。但爲了兼容IE最好用overflow:hidden。it

.box{
  overflow:hidden;
}

那麼爲何「overflow:hidden"會解決這個問題呢？io

是由於「overflow:hidden」會觸發BFC，BFC反過來決定了"height:auto"是如何計算的

，即計算BFC的高度時，浮動元素也參與計算，所以此時父元素會自適應浮動元素的高度。

因此呢，也能夠設置"display:inline-block"、"position:absolute"、"float:left"來解決父元素高度坍塌的問題。由於凡是能建立一個BFC，就能達到包裹浮動子元素的效果。所以網上都說成「BFC能包裹浮動元素」.

2.在父元素內容的後面或者前面增長僞元素+清除浮動

能夠給父元素的內容添加一個僞元素，能夠用::before或者::after，而後內容爲空，這樣就不會佔據位置，最後爲僞元素加上「clear:both"來清除浮動。

<style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::after{
            content: '';
            display: block;
            clear:both;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }

    </style>
<div class="box">
    <div class="item"></div>
</div>

clipboard.png

爲何這樣能夠呢？

弄清緣由須要知道兩點：一是僞元素的實際做用，二是css的清除浮動（clear)只能影響使用清除的元素自己，不能影響其餘元素,而且清除浮動能夠理解爲打破橫向排列。

首先須要搞清除::after和::before起的做用，它們不是在一個元素的後面或者前面插入一個僞元素，而是會在元素內容後面或者前面插入一個僞元素(是在元素裏面)，以前我一直覺得:before和:after僞元素 插入的內容會被注入到目標元素的前或後注入，其實注入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的「前」或「後」。咱們來舉個例子，能夠看到.box的高度爲300px,說明兩個僞元素已經插入到.box內容裏了。

<style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::before{
            content: 'before';
            height: 100px;
            width: 100px;
            display: block;
            clear:both;
            background-color: #61dafb;
        }
        .box::after{
            content: 'after';
            width:100px;
            height:100px;
            display: block;
            clear:both;
            background-color: aquamarine;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }

    </style>
<div class="box">
    <div class="item"></div>
</div>

clipboard.png

綜上，因此咱們經常使用下列方式來清除浮動

.box::after{
  content:'';
  display:block;
  clear:both;
}
或者
.box::before{
  content:'';
  display:block;
  clear:both;
}
或者
.box::before,.box::after{
  content:'';
  display:block;
  clear:both;
}
//::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認狀況下，僞類元素的display是默認值inline，能夠經過設置display:block來改變其顯示。

在父元素的內容先後插入一個僞元素，content爲空能夠保證不佔據位置（高度爲0）。"clear:both"能夠清除父元素左右的浮動，致使.box::before和.box::after遇到浮動元素會換行，從而會撐開高度，父元素會自適應這個高度從而不會出現高度坍陷。

其餘解決高度坍塌的方法都是基於這兩個思想的，一個是觸發BFC，一個是添加元素+清除浮動（clear)。

浮動元素會被後一個元素的margin-top影響

<style>
        body,div{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
        }
        div:nth-of-type(1){
            float: left;
            background-color: #61dafb;
        }
        div:nth-of-type(2){
            margin-top: 100px;
            background-color: #58d3e2;
        }

    </style>
<div >div1</div>
<div>div2</div>

clipboard.png

能夠看到第一個div也跟着下來了，解決辦法是給後一個元素設置clear，此時後一個元素的margin-top將無效

<style>
        body,div{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
        }
        div:nth-of-type(1){
            float: left;
            background-color: #61dafb;
        }
        div:nth-of-type(2){
            clear:both;
            margin-top: 100px;
            background-color: #58d3e2;
        }

    </style>
<div >div1</div>
<div>div2</div>

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程