CSS中若是實現元素浮動，看這篇文章就足夠了

時間 2019-12-01

標籤 css 若是實現元素浮動看這文章足夠欄目 CSS 简体版

原文原文鏈接

浮動基本介紹

在標準文檔流中元素分爲2種，塊級元素和行內元素，若是想讓一些元素既要有塊級元素的特色也同時保留行內元素特色，只能讓這些元素脫離標準文檔流便可。
浮動可讓元素脫離標準文檔流，能夠實現讓多個元素排在同一行，而且能夠設置寬高度。
其實浮動是經過float屬性來實現的。
float屬性值說明表：

屬性值	描述
left	設置元素向左浮動。
right	設置元素向右浮動。

右浮動實踐

讓咱們進入右浮動的實踐，實踐內容如：將class屬性值爲.box1元素設置爲右浮動。
在進入有浮動實踐以前咱們先看看要浮動元素結構是什麼。
代碼塊html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖ui

爲何結果圖是一條邊框線呢？由於在div標籤中尚未內容呢，如今咱們將子div標籤設置寬高度爲100px像素而且添加背景顏色。
代碼塊spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖3d

爲何會排列爲3行呢，由於3個div標籤都是塊級元素。
如今咱們將class屬性值爲.box1的元素設置爲右浮動。
代碼塊code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:right;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖htm

注意：如今咱們發現calss屬性值爲.box元素高度變矮了，這就說明了（浮動元素它已經脫離了標準文檔流，再也不佔用空間了）、而且向右浮動，浮動到自身的父元素的邊緣位置就中止了浮動。blog

左浮動實踐

讓咱們進入左浮動的實踐，實踐內容如：將class屬性值爲.box1元素設置爲左浮動。
代碼塊文檔

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖it

咱們先理解浮動的原理以後再解釋下class屬性值爲.box2元素看不見的緣由。
如今筆者給你們看2張實踐結果圖如：
結果圖Atable

結果圖B

經過這2張結果圖咱們能夠把浮動簡單的理解爲「漂」舉例：
假設class屬性值爲.box是一個池塘，3個子元素都是可以漂浮在池塘水面上的東西，如今咱們將calss屬性值爲.box1元素浮動起來，漂在池塘水面上，是否是就再也不佔用池塘內的空間了。
既然咱們理解爲「漂」它必定是漂浮在池塘水面之上，可是沒有浮動的元素在池塘水面以內，因此class屬性值爲.box2元素看不見，並不表明它不存在只是被class屬性值爲.box1元素給遮擋住了，如今咱們將class屬性值爲.box2元素寬度設置爲150px像素。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖

注意：事實證實class屬性值爲.box2元素是存在的。
下面咱們將calss屬性值爲.box2元素設置爲左浮動看看有什麼不同的效果
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖

可是class屬性值爲.box2的元素左浮動並無左浮動到自己父元素的邊緣位置，爲何在class屬性值爲.box1後面呢？由於父元素已經有了浮動的子元素後面的子元素在浮動就浮動到前面浮動的元素以後。
如今咱們將class屬性值爲.box3的元素設置爲左浮動，看看有什麼不同的效果。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結果圖

注意：浮動元素浮動之後，其父元素再也不將浮動的子元素包裹在父元素以內，因此結果圖出現一條黑色的邊框線，如有不明白的看第一個實踐內容。

將行內元素設置浮動

若是咱們給行內元素設置了浮動，行內元素就擁有了塊級元素的特色。
讓咱們進入行內元素設置浮動實踐，實踐內容如：將div標籤中的span標籤設置爲左浮動。
在設置左浮動以前咱們先看看給span標籤設置寬高度和背景顏色有什麼效果。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰3</span>
  </div>
</body>
</html>

結果圖

如今發現咱們給span標籤設置了寬高度爲100px像素並無生效，由於如今span標籤仍是行內元素。
如今咱們給span標籤設置左浮動，而後咱們在看看效果如何。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
        float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰</span>
  </div>
</body>
</html>