float浮動的詳細總結

MomentYY發表於2021-12-24

float浮動的詳細總結

1.定位方案

在css中，有4種常用的方法對元素進行定位和佈局：

  • normal flow：標準流、文件流；
  • position：定位（relative、absolute、fixed）；
  • float：浮動；
  • flex：彈性佈局；

其中浮動、定位的absolute和fixed都會讓元素脫離標準流，以達到靈活佈局的效果。

2.float的屬性值

float屬性的常用取值有以下3個：

  • none：不浮動（float的預設值）；
  • left：向左浮動；
  • right：向右浮動；

3.浮動的規則

3.1.規則一

  • 元素新增浮動後，就會脫離標準流；

  • 朝著向左或向右方向移動，直到自己的邊界緊貼包含塊（一般是父元素）或者其它浮動元素的邊界為止；

    • 示例程式碼：

      .box {
  width: 600px;
  height: 200px;
  background-color: #87ceeb;
}

.inner {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #0f0;
}

span { background-color: #f00; }

strong { background-color: #f0f; }

a { background-color: #fff; }

      <div class="box">
  div元素的文字
  <div class="inner"></div>
  <span>span元素</span>
  <strong>strong元素</strong>
  <a href="#">a元素</a>
</div>

    • 執行結果：沒有給任何元素新增浮動，為標準流佈局；

    • 給strong元素新增float: left;，strong元素會移動到父元素box的左上角；

    • 給strong元素新增float: right;，strong元素會移動到父元素box的右上角；

    • 如果strong元素已經預設新增了浮動，然後給a元素再新增浮動，a元素會移動到貼緊strong元素的位置；

  • 定位元素會層疊在浮動元素上：標準元素 > 浮動元素（非none） > 定位元素（非static）；

3.2.規則二

  • 浮動元素不能與行內級內容層疊，行內級內容將會被浮動元素推出，從上面規則一的示例就可以看出；

  • 這是因為設計float就是用於進行圖文環繞的，是不會將行內級內容覆蓋住的；

  • 行內級內容包含行內級元素、inline-block元素、塊級元素的文字內容等；

3.3.規則三

  • 行內級元素、inline-block元素浮動後，其頂部將與所在行的頂部對齊；
  • 從規則二中可以發現，圖片在設定左浮動後，並沒有移動到父元素的左上角，而是移動到了圖片所在行的最左邊；

3.4.規則四

  • 元素向左（右）浮動，浮動元素的左（右）邊界不能超出包含塊的左（右）邊界；

    • 示例程式碼：

      .box {
  width: 400px;
  height: 200px;
  background-color: skyblue;
  color: #fff;
}

.inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.inner2 {
  float: right;
  width: 100px;
  height: 100px;
  background-color: green;
}

      <div class="box">
  <div class="inner1">左浮動</div>
  <div class="inner2">右浮動</div>
</div>

    • 執行結果：

3.5.規則五

  • 浮動元素之間不能層疊；
  • 如果一個元素浮動，另一個元素已經在那個位置了，後浮動的元素將緊貼前一個浮動元素（左浮找左浮，右浮找右浮）；
  • 如果水平方向剩餘的空間不夠顯示浮動元素，浮動元素將向下移動，直到有充足空間為止；

示例程式碼：給box中的所有元素設定float: left;。

.box {
  width: 400px;
  height: 500px;
  background-color: skyblue;
  color: #fff;
}

.inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.inner2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}

.inner3 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: purple;
}

.inner4 {
  float: left;
  width: 50px;
  height: 250px;
  background-color: blue;
}

<div class="box">
  <div class="inner1">inner1</div>
  <div class="inner2">inner2</div>
  <div class="inner3">inner3</div>
  <div class="inner4">inner4</div>
</div>

執行結果：

3.6.規則六

  • 浮動元素的頂端不能超過包含塊的頂端，也不能超過之前所有浮動元素的頂端；
  • 從規則五可以發現，inner4在設定浮動後，是不會超過inner3的頂部的，即使上面還有多餘的位置；

4.浮動存在的問題及clear屬性介紹

  • 由於浮動元素脫離的標準流，變成了脫標元素，所以不再向父元素彙報高度了；
  • 父元素在計算總高度時，就不會計算浮動子元素的高度，導致父元素高度坍塌問題；
  • 解決父元素高度坍塌問題過程，叫做清除浮動，以下將提供幾種清除浮動的方案；

5.clear屬性

在說清除浮動方案之前，需要先了解一clear屬性。

  • clear屬性的常用取值：

    屬性值 作用
    left 要求元素的頂部低於之前生成的所有左浮動元素的底部
    right 要求元素的頂部低於之前生成的所有右浮動元素的底部
    both 要求元素的頂部低於之前生成的所有浮動元素的底部
    none 預設值，無特殊要求

  • 一般clear只用在非浮動元素上，可以讓非浮動元素與浮動元素不層疊。

5.清除浮動的常見方法

  • 方案一：

    • 給父元素直接設定固定的高度；
    • 缺點：擴充套件性不好；

  • 方案二：

    • 在父元素最後增加一個空的塊級子元素，並且設定clear: both;；
    • 缺點：會增加很多無意義的空標籤，後期維護麻煩，並且違反了結構與樣式分離的原則；

  • 方案三：

    • 在父元素最後增加一個br標籤：<br clear="all">；
    • 缺點：與方案二一樣；

  • 方案四：

    • 給父元素增加::after偽元素；
    • 優點：純css樣式解決，結構與樣式分離，並且沒有新增多餘標籤；
    • 一般使用偽元素清除浮動，都會單獨寫一個類，便於複用，使用時直接給父元素加上型別即可；
    .clear-fix::after {
  content: ""; /* 核心屬性，缺一不可 */
  display: block; /* 核心屬性，缺一不可 */
  clear: both; /* 核心屬性，缺一不可 */
  height: 0; /* 相容舊瀏覽器 */
  visibility: hidden; /* 相容舊瀏覽器 */
}
.clear-fix {
  zoom: 1; /* 相容IE6~7 */
}

相關文章