【27】CSS核心樣式（6）——浮動屬性（上）-有解無憂

★文章內容學習來源：拉勾教育大前端就業集訓營

浮動是我們學習的第一種脫離標準流的方式，
本篇? 浮動定義 ? 浮動的性質
在這里插入圖片描述
下篇? 浮動的問題 ? 清除浮動方法

一、浮動定義

1.定義

浮動	一種非常重要的布局屬性
屬性名	float，漂流、浮動的意思
屬性值	①eft 左浮動 ②right 右浮動
作用	讓元素脫離標準流，同一級的浮動的元素可以并排在一排顯示

2.舉例

2.1 舉例——右浮動

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動定義舉例（右浮動）</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 800px;
      height: 100px;
      border: 1px solid #f00;
    }
    .box p {
      float: right; /*在父元素中右浮動*/
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</body>
</html>

在這里插入圖片描述

2.1 舉例——左浮動

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動定義舉例（左浮動）</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 800px;
      height: 100px;
      border: 1px solid #f00;
    }
    .box p {
      float: left; /*在父元素中左浮動*/
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</body>
</html>

在這里插入圖片描述

二、浮動的性質

為了更好的利用浮動進行布局，我們需要了解浮動相關的性質，

1.脫離標準流

標準檔案流特點：區分行塊，
塊級元素：可以設定寬高，必須獨占一行；
行內元素：不能設定寬高，可以并排一行，

浮動的元素脫離了標準流的限制，具備行塊二象性：
浮動的元素可以設定寬高，還可以并排一行（如上舉例），而且不會有空白折疊現象，如果元素不設定寬高，可以被元素內容自動撐開，

2.依次貼邊

浮動屬性值：left、right，
浮動方向設定不同，進行布局時，加載位置方向不同，

2.1 以 left 為例：

(1) 父元素寬度足夠，所有子元素會按照HTML書寫順序，依次向左進行貼邊，父元素左邊←子元素1←子元素2← 子元素3←子元素4，
（如浮動的定義中左浮動的舉例）

(2)父元素寬度如果不夠:
(2.1)例如不能放下一個子元素4，那么子元素4在貼邊時，會跳過上一個子元素3，向更上一個子元素2進行貼邊，如果子元素2后面位置不夠，繼續跳過子元素2向前面的子元素1進行貼邊，
（如下舉例）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動的性質——依次貼邊</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      height: 400px;
      border: 10px solid #000;
    }
    .box p {
      float: left; 
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box .ps1 {
      height: 200px;
      background-color: #f00;
    }
    .box .ps2 {
      width: 180px;
      height: 300px;
      background-color: #0f0;
    }
    .box .ps3 {
      background-color: #999;
    }
    .box .ps4 {
      width: 50px;
      background-color: #ff0;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
    <p class="ps3">3</p>
    <p class="ps4">4</p>
  </div>
</body>
</html>

在這里插入圖片描述

(2.2) 如果子元素4在跳過子元素3向更前面的子元素2貼邊時，子元素2的高度不高于子元素3，子元素2沒有延伸出一個高度的邊讓子元素4貼邊，那么子元素4就會跳過子元素2向子元素1進行貼邊，
（如下舉例）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動的性質——依次貼邊</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      height: 400px;
      border: 10px solid #000;
    }
    .box p {
      float: left; 
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box .ps1 {
      height: 200px;
      background-color: #f00;
    }
    .box .ps2 {
      width: 180px;
      height: 50px;
      background-color: #0f0;
    }
    .box .ps3 {
      background-color: #999;
    }
    .box .ps4 {
      width: 300px;
      background-color: #ff0;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
    <p class="ps3">3</p>
    <p class="ps4">4</p>
  </div>
</body>
</html>

在這里插入圖片描述

(2.3)如果貼邊的這個子元素4寬度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一個凹陷，子元素4會受前面子元素3高度影響，不會出現鉆空現象，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動的性質——依次貼邊</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      height: 400px;
      border: 10px solid #000;
    }
    .box p {
      float: left; 
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box .ps1 {
      height: 200px;
      background-color: #f00;
    }
    .box .ps2 {
      width: 180px;
      height: 50px;
      background-color: #0f0;
    }
    .box .ps3 {
      background-color: #999;
    }
    .box .ps4 {
      width: 50px;
      background-color: #ff0;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
    <p class="ps3">3</p>
    <p class="ps4">4</p>
  </div>
</body>
</html>

在這里插入圖片描述

(2.4) 如果子元素1后面的距離也放不下子元素4，子元素4最侄訓貼到父元素左邊，如果子元素4的寬度超過了父元素，只會出現溢位現象，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動的性質——依次貼邊</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      height: 400px;
      border: 10px solid #000;
    }
    .box p {
      float: left; 
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box .ps1 {
      height: 200px;
      background-color: #f00;
    }
    .box .ps2 {
      width: 180px;
      height: 50px;
      background-color: #0f0;
    }
    .box .ps3 {
      background-color: #999;
    }
    .box .ps4 {
      width: 350px;
      background-color: #ff0;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
    <p class="ps3">3</p>
    <p class="ps4">4</p>
  </div>
</body>
</html>

在這里插入圖片描述

★右浮動與左浮動貼邊效果是一致的，只是貼邊方向不同，按照 HTML 書寫順序依次向右向上一個元素貼邊，第一個元素貼父元素的右邊，

2.2案例：

利用浮動依次貼邊的性質，用串列結構模擬平均分布的表格布局結構，
(1)制作方法：<ul>內部嵌套的<li>標簽全部浮動，寬高設定相同，邊框可以利用標簽之間的間距和背景顏色的差異進行制作，
(2)注意：同一個盒子中，可以有左浮動和右浮動的子盒子并存，子盒子會根據浮動方向，向上一個同方向的子盒子進行貼邊，如果空間不夠，也會發生之前依次貼邊的各種情況，
(3)代碼及效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>案例：用串列結構模擬平均分布的表格布局結構</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      width: 600px;
      height: 126px;
      padding-top: 2px;
      padding-left: 2px;
      background-color: #ccc;
    }
    ul li {
      float: left;
      width: 100px;
      height: 40px;
      margin-right: 2px;
      margin-bottom: 2px;
      background-color: skyblue;
    }
    .fr {
      float: right;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="fr">4</li>
    <li>5</li>
    <li>6</li>
    <li class="fr">7</li>
    <li>8</li>
    <li>9</li>
    <li class="fr">10</li>
    <li class="fr">11</li>
    <li>12</li>
  </ul>
</body>
</html>

在這里插入圖片描述

2.3貼邊性質應用

利用浮動的這個依次貼邊性質，可以完成多種網頁布局效果，
例如：
上述平均分布表格效果；
導航欄效果；
常見的電商或企業網站布局；

3.沒有margin塌陷

margin 塌陷現象出現在標準流中的，浮動元素已經脫離標準流，不再具有 margin 塌陷現象，
例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動的性質——沒有margin塌陷</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 400px;
      background-color: pink;
    }
    .ps1 {
      float: left;
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: skyblue;
    }
    .ps2 {
      float: left;
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
  </div>
</body>
</html>

在這里插入圖片描述

4.讓出標準流位置

元素浮動之后，脫離了標準流，會將原來占有的標準流位置讓給后面的一個同級元素，
在 IE6 、 7瀏覽器中，有兼容問題：
由于瀏覽器中有兼容性問題，不會使用這種屬性制作壓蓋效果，真正的壓蓋效果使用后期學習的定位制作，
如果沒有特殊需求，不允許一個父元素中的子元素有的浮動有的不浮動，同級元素中有一個浮動其他的也要浮動，
設定了浮動屬性之后，會讓出標準流的位置，如下舉例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮動的性質——讓出標準流 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .ps1 {
      float: left; /*設定了浮動屬性之后，這個元素會讓出標準流的位置*/
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .ps2 { /*未設定浮動，仍然是標準流中的元素，但因為前一個元素讓出了標準流的位置，所以這個的位置并沒有在前一個元素之后加載*/
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
  </div>
</body>
</html>

在這里插入圖片描述

5.字圍現象

與前面壓蓋效果結構類似，同級元素中前面的元素浮動，后面的元素不浮動，不浮動的元素內部還有一些文字，浮動的藍盒子會壓蓋住綠盒子的一部分，但是文字內容不會被蓋住，綠盒子中的文字會讓開藍盒子位置，圍繞它進行加載，這種效果稱為字圍現象，
可以利用字圍現象制作一些特殊的圖文混排布局效果：
例如：
代碼及顯示效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字圍現象</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      border: 1px solid #000;
    }
    .box img {
      float: right;
      width: 150px;
      margin-left: 20px;
    }
    .ps2 {
      width: 400px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="heben.jfif" alt=""> <!--要寫自己圖片所在的路徑-->
    <p class="ps2">這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
      這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
      這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
      這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
      這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
      這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
      這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，這是一個明星，名字叫赫本，
    </p>

  </div>
</body>
</html>

在這里插入圖片描述

下篇繼續：【28】CSS核心樣式（6）——浮動屬性（下）
? 浮動的問題 ? 清除浮動方法

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272902.html

標籤：其他

上一篇：力扣春季賽

下一篇：JS入門陣列處理實用方法總結

【27】CSS核心樣式（6）——浮動屬性（上）

一、浮動定義

1.定義

2.舉例

2.1 舉例——右浮動

2.1 舉例——左浮動

二、浮動的性質

1.脫離標準流

2.依次貼邊

2.1 以 left 為例：

2.2案例：

2.3貼邊性質應用

3.沒有margin塌陷

4.讓出標準流位置

設定了浮動屬性之后，會讓出標準流的位置，如下舉例：

5.字圍現象