0023 css浮動：float、清除浮動4種方法、浮動元素與父元素和兄弟元素的關系、清除浮動案例

本文轉載自查看原文 2019-12-31 17:59 1098 css

浮動：
1、浮動的元素脫標。如果一個元素浮動了，那么，（1）將能夠【無縫】並排了；（2）並且能夠設置寬高了，無論它原來是個div還是個span，浮動即脫離標准流，inline、block是在標准流里用的。
2、浮動的元素互相貼靠。左浮動就會貼左邊，右浮動貼右邊，貼上一個兄弟元素的邊。
3、浮動的元素有“字圍”效果。
4、收縮。不區分行內元素和塊級元素了：原來的行內元素現在可以設置寬度、高度；原來的塊級元素，如果不寫width，現在會自動縮減為內容寬度。

1.1 CSS 布局的三種機制

網頁布局的核心——就是用 CSS 來擺放盒子。

CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流（標准流）、浮動和定位，其中：

普通流（標准流）
- 塊級元素會獨占一行，從上向下順序排列；
  - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
  - 常用元素：span、a、i、em等
浮動
- 讓盒子從普通流中浮起來，主要作用讓多個塊級盒子一行顯示。
定位
- 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效。

1.2 為什么需要浮動？

思考題：

我們首先要思考以下2個布局中最常見的問題？

如何讓多個盒子(div)水平排列成一行？

在這里插入圖片描述

如何實現盒子的左右對齊？

雖然我們前面學過行內塊（inline-block），但是他卻有自己的缺陷：

它可以實現多個元素一行顯示，但是中間會有空白縫隙，不能滿足以上第一個問題。
它不能實現以上第二個問題，盒子左右對齊。

一句話總結他們

因為一些網頁布局要求，標准流不能滿足我們的需要了，因此我們需要浮動來完成網頁布局。

1.3 什么是浮動(float)

概念：元素的浮動是指設置了浮動屬性的元素會

脫離標准普通流的控制；
移動到指定位置。

作用

讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
可以實現盒子的左右對齊等等。
浮動最早是用來控制圖片，實現文字環繞圖片的效果。

在這里插入圖片描述

語法

在 CSS 中，通過 float （中文“浮漏特”）屬性定義浮動，語法如下：

選擇器 { float: 屬性值; }

屬性值	描述
none	元素不浮動（默認值）
left	元素向左浮動
right	元素向右浮動

浮動口訣：通過 float ----- 浮漏特。

1). 浮動口訣之浮

浮動——浮_浮浮~~~漂浮在普通流的上面，不占位，脫離標准流，俗稱 “脫標” 。

在這里插入圖片描述

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

小結：

float 屬性會讓盒子漂浮在標准流的上面，所以第二個標准流的盒子跑到浮動盒子的底下了。

2). 浮動口訣之漏

浮動——漏_漏漏~ 浮動的盒子，把自己原來的位置漏給下面標准流的盒子，就是不占有原來位置，是脫離標准流的，我們俗稱 “脫標”。

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 讓第 1 個盒子漂浮起來，不占位置 */
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

所以，box2下面的其實就是跑到box1盒子下面了，被box1給壓住了，遮擋起來了

來來來，我們看個立體圖

在這里插入圖片描述

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

<head>
  <meta charset="UTF-8">
  <title>浮動口訣之浮</title>
  <style>
    .one {
      /*不是標准流了， 漂浮起來， 浮在 標准流的上面*/
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .two {
      width: 300px;
      height: 300px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

</html>

3). 浮動口訣之特

浮動——特性 float屬性會改變元素display屬性。

任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。生成的塊級框和我們前面的行內塊極其相似。【但是生成的塊級框又不完全是行內快元素，因為生成的塊級框之間沒有空隙。】

體驗案例——div 水平排列

div {
    width: 200px;
    height: 200px;
    background-color: pink;

    /* 轉換為行內塊元素，可以水平顯示，不過 div 之間有間隙，不方便處理 */
    /* display: inline-block; */

    /* 設置浮動屬性，可以讓 div 水平排列，並且沒有間隙 */
    float: left;
}

.two {
    background-color: hotpink;

}

注意：浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊

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

<head>
  <meta charset="UTF-8">
  <title>浮動口訣之浮</title>
  <style>
    /*浮動元素默認之間沒有縫隙 和真正的行內塊有區別*/
    .one,
    .two {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .one {
      float: left;
    }

    .two {
      background-color: purple;
      float: left;
    }

    .three {
      float: left;
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</body>

</html>

在這里插入圖片描述

1.4 浮動(float)小結

我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。因為這是我們最常見的一種布局方式

float —— 浮漏特

特點	說明
浮	加了浮動的盒子是浮起來的，漂浮在其他標准流盒子的上面。
漏	加了浮動的盒子是不占位置的，它原來的位置漏給了標准流的盒子。
特	特別注意：浮動元素會改變display屬性，類似轉換為了行內塊，但是元素之間沒有空白縫隙

1.5 浮動(float)的應用（重要）

浮動和標准流的父盒子搭配

我們知道，浮動是脫標的，會影響下面的標准流元素，此時，我們需要給浮動的元素添加一個標准流的父親，這樣，最大化的減小了對其他標准流的影響。

說：

一個完整的網頁，是標准流 + 浮動 + 我們后面要講的定位一起完成的。

浮動應用案例

在這里插入圖片描述

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

<head>
  <meta charset="UTF-8">
  <title>小米案例練習</title>
  <style>
    /*清除元素默認內外邊距樣式*/
    * {
      margin: 0;
      padding: 0;
    }

    /*清除列表樣式 前面的小點點*/
    li {
      list-style: none;
    }

    .box {
      width: 1226px;
      height: 615px;
      background-color: pink;
      margin: auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 615px;
      background-color: purple;
    }

    .left img {
      /*width: 234px;*/
      width: 100%;
    }

    .right {
      float: right;
      width: 992px;
      height: 615px;
      background-color: skyblue;
    }

    .right li {
      float: left;
      width: 234px;
      height: 300px;
      background-color: pink;
      margin-left: 14px;
      margin-bottom: 14px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">
      <img src="images/mi.jpg" alt="">
    </div>
    <ul class="right">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>
</body>

</html>

在這里插入圖片描述

導航欄案例

在這里插入圖片描述

注意，實際重要的導航欄中，我們不會直接用鏈接a 而是用 li 包含鏈接(li+a)的做法。

li+a 語義更清晰，一看這就是有條理的列表型內容。
如果直接用a，搜索引擎容易辨別為有堆砌關鍵字嫌疑（故意堆砌關鍵字容易被搜索引擎有降權的風險），從而影響網站排名

<!-- 
個人覺得：最外層包裹一個div比較好，代碼如下：
.wraper {
  width: 760px;
  /* height: 600px; */
  background-color: #ccc;
  margin: auto;
}
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>導航欄案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .banner {
      width: 760px;
      height: 150px;
      background-color: pink;
      margin: auto;
    }

    .nav {
      width: 760px;
      height: 32px;
      /*background-color: pink;*/
      margin: 0 auto;
      background: url(images/nav_bg.jpg) repeat-x;
    }

    .nav ul li {
      /*因為li 讓文字豎着顯示，所以必須給li 添加浮動*/
      float: left;
    }

    .nav ul li a {
      /*a是行內元素需要轉換*/
      /*一定給a 大小，因為我們需要 a:hover*/
      display: block;
      width: 80px;
      line-height: 32px;
      height: 32px;
      /*background-color: pink;*/
      background: url(images/button1.jpg) no-repeat;
      font-size: 12px;
      text-decoration: none;
      color: #40510a;
      text-align: center;
    }

    .nav ul li a:hover {
      background-image: url(images/button2.jpg);
    }
  </style>
</head>

<body>
  <!-- banner 是廣告條的 -->
  <div class="banner">
    <img src="images/banner.jpg" alt="">
  </div>
  <!-- nav 導航欄部分  -->
  <!-- 以后我們重要的導航欄，都要采取 li 包含a 的寫法 -->
  <div class="nav">
    <ul>
      <li><a href="#">網站首頁</a></li>
      <li><a href="#">網站首頁</a></li>
      <li><a href="#">網站首頁</a></li>
      <li><a href="#">網站首頁</a></li>
      <li><a href="#">網站首頁</a></li>
      <li><a href="#">網站首頁</a></li>
    </ul>
  </div>
</body>

</html>

1.6 浮動(float)的擴展

1). 浮動元素與父盒子的關系

子盒子的浮動參照父盒子對齊
不會與父盒子的邊框重疊，也不會超過父盒子的內邊距

在這里插入圖片描述

2). 浮動元素與兄弟盒子的關系

在一個父級盒子中，如果前一個兄弟盒子是：

浮動的，那么當前盒子會與前一個盒子的頂部對齊；
普通流的，那么當前盒子會顯示在前一個兄弟盒子的下方。

記住：

浮動只會影響當前的或者是后面的標准流盒子，不會影響前面的標准流。

建議

如果一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動。防止引起問題

2. 清除浮動

2.1 為什么要清除浮動

因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標准流盒子。

在這里插入圖片描述

總結：
- 由於浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響
- 准確地說，並不是清除浮動，而是清除浮動后造成的影響。

2.2 清除浮動本質

清除浮動本質：

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標准流了。

2.3 清除浮動的方法

在CSS中，clear屬性用於清除浮動，在這里，我們先記住清除浮動的方法，具體的原理，等我們學完css會再回頭分析。

語法：

選擇器{clear:屬性值;}   clear 清除

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動的影響）
right	不允許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

但是我們實際工作中，幾乎只用 clear: both;

1)額外標簽法(隔牆法)

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。

優點：通俗易懂，書寫方便
缺點：添加許多無意義的標簽，結構化較差。

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*很多情況下，我們的父盒子，不方便給高度  根據內容撐開，有多少內容，我的父盒子就有多高*/
    .one {
      width: 500px;
      /*background-color: pink;*/
      border: 1px solid red;
    }

    /*因為damao 二毛 浮動了，不占有位置， 而父級又沒有高度， 所以two 就到底下去了*/
    .damao {
      float: left;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    .ermao {
      float: left;
      width: 250px;
      height: 250px;
      background-color: skyblue;
    }

    .two {
      width: 700px;
      height: 150px;
      background-color: #000;
    }

    /*清除浮動*/
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="one">
    <div class="damao"></div>
    <div class="ermao"></div>
    <div class="clear"></div>
  </div>
  <div class="two"></div>
</body>

</html>

2)父級添加overflow屬性方法

可以給父級添加： overflow為 hidden| auto| scroll  都可以實現。 【auto、scroll：增加滾動條。】

優點：代碼簡潔

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*很多情況下，我們的父盒子，不方便給高度  根據內容撐開，有多少內容，我的父盒子就有多高*/
    .one {
      width: 500px;
      /*background-color: pink;*/
      border: 1px solid red;
      /*給父級添加 overflow 就可以清除浮動*/
      overflow: hidden;
    }

    /*因為damao 二毛 浮動了，不占有位置， 而父級又沒有高度， 所以two 就到底下去了*/
    .damao {
      float: left;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    .ermao {
      float: left;
      width: 250px;
      height: 250px;
      background-color: skyblue;
    }

    .two {
      width: 700px;
      height: 150px;
      background-color: #000;
    }
  </style>
</head>

<body>
  <div class="one">
    <div class="damao"></div>
    <div class="ermao"></div>
  </div>
  <div class="two"></div>
</body>

</html>

3)使用after偽元素清除浮動

:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   /* 這里的:after不叫偽類，叫偽元素，會生成一個新標簽（空盒子），放到盒子的最后面，但是是用css寫的，並沒有用html結構體現 */

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

優點：符合閉合浮動思想結構語義化正確
缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站：百度、淘寶網、網易等

在這里插入圖片描述

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*聲明清除浮動的樣式*/
    .clearfix:after {
      content: "";
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
      /*ie6,7 專門清除浮動的樣式*/
    }

    /*很多情況下，我們的父盒子，不方便給高度  根據內容撐開，有多少內容，我的父盒子就有多高*/
    .one {
      width: 500px;
      /*background-color: pink;*/
      border: 1px solid red;

    }

    /*因為damao 二毛 浮動了，不占有位置， 而父級又沒有高度， 所以two 就到底下去了*/
    .damao {
      float: left;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    .ermao {
      float: left;
      width: 250px;
      height: 250px;
      background-color: skyblue;
    }

    .two {
      width: 700px;
      height: 150px;
      background-color: #000;
    }
  </style>
</head>

<body>
  <div class="one clearfix">
    <div class="damao"></div>
    <div class="ermao"></div>
  </div>
  <div class="two"></div>
</body>

</html>

4)使用雙偽元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優點：代碼更簡潔
缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站：小米、騰訊等

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*聲明清除浮動的樣式*/
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

    /*很多情況下，我們的父盒子，不方便給高度  根據內容撐開，有多少內容，我的父盒子就有多高*/
    .one {
      width: 500px;
      /*background-color: pink;*/
      border: 1px solid red;

    }

    /*因為damao 二毛 浮動了，不占有位置， 而父級又沒有高度， 所以two 就到底下去了*/
    .damao {
      float: left;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    .ermao {
      float: left;
      width: 250px;
      height: 250px;
      background-color: skyblue;
    }

    .two {
      width: 700px;
      height: 150px;
      background-color: #000;
    }
  </style>
</head>

<body>
  <div class="one clearfix">
    <div class="damao"></div>
    <div class="ermao"></div>
  </div>
  <div class="two"></div>
</body>

</html>

2.4 清除浮動總結

以后什么時候用清除浮動呢？

父級沒高度
子盒子浮動了
影響下面布局了，我們就應該清除浮動了。

清除浮動的方式	優點	缺點
額外標簽法（隔牆法）	通俗易懂，書寫方便	添加許多無意義的標簽，結構化較差。
父級overflow:hidden;	書寫簡單	溢出隱藏
父級after偽元素	結構語義化正確	由於IE6-7不支持:after，兼容性問題
父級雙偽元素	結構語義化正確	由於IE6-7不支持:after，兼容性問題

后面兩種偽元素清除浮動，大家暫且會使用就好，深入原理，我們后面學完偽元素再講。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css筆記：清除子元素對父元素的浮動效果的三種方法 css - 偽元素清除浮動 float浮動導致父元素高度坍塌的原因及清除浮動方法 css清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？一起來$('.float') 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響？清除浮動指什么？如何清除浮動？浮動（float）和清除浮動徹底理解浮動float CSS浮動詳解清除浮動的方法 CSS(7)--- 清除浮動(float) CSS之浮動布局（float，浮動原理，清除/閉合浮動方法） CSS 使用偽元素清除浮動