12-CSS浮動

自由的代价很贵發表於2024-06-13

01 介紹

02 浮動規則

03 案例練習

3.1 縫隙的解決方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">
    <span>abc</span>
    <span>123</span>
    <span>ABC</span>
  </div>
</body>
</html>

這種元素之間的縫隙是因為程式碼中的換行符被瀏覽器解析成了空格使用浮動解決 ```html fold Document

abc 123 ABC

``` ![[01-前端/02-CSS佈局/imgs/00021.png]] ## 3.2 百度頁碼 ```html fold Document

1
2
3
4
5
6
7
8
9
10
下一頁>

``` ![[01-前端/02-CSS佈局/imgs/00022.png]]

04 關於多列布局使用浮動的方法

![[01-前端/02-CSS佈局/imgs/00023.png]]

4.1 京東多列布局方案一(不推薦)

這種方式雖然可以解決,但是會有相容性的問題,因為使用到了偽類
如果不考慮相容性的情況可以使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
      
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    .item .box:last-child {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>
</html>

![[01-前端/02-CSS佈局/imgs/00024.png]]

4.2 京東多列布局方案2(不推薦)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 1190px;
      height: 800px;
      margin: 0 auto;
      background-color: orange;
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      margin-right: 10px;
      background-color: red;
    }
    /* 每5個加一個last-item，但是這種方案比較麻煩 */
    .item .box:nth-child(5n){
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box last-item">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box last-item">10</div>
  </div>
</body>
</html>

![[01-前端/02-CSS佈局/imgs/00025.png]]

4.3 京東多列布局方案3(推薦)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
      
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    /* 根據公式: 父級盒子的寬度=子盒子+ margin left + margin right
       這種方案就是首先要用一個盒子把元素包裹起來
    */
    .item .content {
      margin-right: -10px;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
    </div>
  </div>
</body>
</html>

![[01-前端/02-CSS佈局/imgs/00026.png]]
![[01-前端/02-CSS佈局/imgs/00027.png]]

4.4 考拉多列布局

![[01-前端/02-CSS佈局/imgs/00028.png]]

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .content {
         width: 1100px;
         margin: 0 auto;
         height: 800px;
         background-color: #ccc;
      }
      .item {
         width: 220px;
         height: 168px;
         float: left;
         background-color: red;
         border: 1px solid #000;
      }
   </style>
</head>
<body>
   <div class="content">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</body>
</html>

效果如下
![[01-前端/02-CSS佈局/imgs/00029.png]]
有2個問題需要解決:

第1個是由於浮動的原因，最有一個元素跑到下面來了
第2個是由於設定了border，會導致元素之間有2個線的寬度
解決第2個問題,margin-left設定負值，讓2條線之間重合

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .content {
         width: 1100px;
         margin: 0 auto;
         height: 800px;
         background-color: #ccc;
      }
      .item {
         width: 220px;
         height: 168px;
         float: left;
         background-color: red;
         border: 1px solid #000;
         margin-left: -1px;
      }
   </style>
</head>
<body>
   <div class="content">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</body>
</html>

![[01-前端/02-CSS佈局/imgs/00030.png]]
解決第一個問題
![[01-前端/02-CSS佈局/imgs/00031.png]]
![[01-前端/02-CSS佈局/imgs/00032.png]]
這樣看上去好像合理，但是右邊會有一點突出
![[01-前端/02-CSS佈局/imgs/00033.png]]
這樣設定以後，不論如何，都會有一邊會突出一點，只能透過調整其中一個item少1px

05 浮動的塌陷問題

5.1 塌陷的現象

如果刪除高度,那麼最下面的那個盒子會上來,因為content中的元素都是浮動,脫離了標準元素,不會向父元素彙報高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      /* 如果刪除高度,那麼最下面的那個盒子會上來,因為content中的元素都是浮動,脫離了標準元素,不會向父元素彙報高度 */
      /* height: 500px; */
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    /* 根據公式: 父級盒子的寬度=子盒子+margin left + margin right
       這種方案就是首先要用一個盒子把元素包裹起來
    */
    .item .content {
      margin-right: -10px;
    }
    .other {
      width: 1500px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
  <div class="other"></div>
</body>
</html>

![[01-前端/02-CSS佈局/imgs/00034.png]]

5.2 解決塌陷問題推薦的方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    /* 根據公式: 父級盒子的寬度=子盒子+margin left + margin right
       這種方案就是首先要用一個盒子把元素包裹起來
    */
    .item .content {
      margin-right: -10px;
    }
    .clear-fix::after {
      content: "";
      clear: both;
      display: block;
      /* 加上瀏覽器的相容性 */
      visibility: hidden;
      height: 0;
    }
    .clear-fix {
      /* 相容IE6/IE7 */
      *zoom: 1;
    }
    .other {
      width: 1500px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="content clear-fix">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
  <div class="other"></div>
</body>
</html>

5.3 解決塌陷問題的本質

![[01-前端/02-CSS佈局/imgs/00035.png]]

CSS 浮動(Float) 清除浮動
2019-07-17
CSS
清除浮動與閉合浮動區別
2018-08-25
浮動、定位
2018-04-02
CSS入門12-浮動與清除浮動
2018-01-25
CSS
聖盃佈局+浮動清浮
2019-03-20
CSS——清除浮動
2020-04-04
CSS
CSS 清除浮動
2018-08-25
CSS
css清除浮動
2018-11-25
CSS
CSS float浮動
2018-08-03
CSS
CSS float 浮動
2018-08-03
CSS
CSS浮動（float）
2020-11-15
CSS
清楚CSS浮動
2020-11-28
CSS
前端入門-day3(CSS中浮動和清除浮動)
2018-10-26
前端CSS
css浮動詳解
2019-03-17
CSS
CSS浮動一：div
2020-12-21
CSS
CSS-清除浮動
2020-11-14
CSS
CSS浮動與定位
2017-03-19
CSS
深入清除浮動原理
2018-05-15
浮動元素水平居中
2013-08-27
浮動圖片（JS）
2006-02-21
JS
浮動廣告程式碼
2007-09-03
CSS之浮動Float
2024-02-25
CSS
CSS 基礎點集錦一：盒子模型、浮動、清除浮動
2015-10-26
CSS模型
CSS——讓“盒子”動起來：① 浮動
2019-04-28
CSS
JavaScript動態設定float浮動
2018-06-17
JavaScript
浮動和定位基礎
2019-04-09
css清除浮動的原理
2018-07-31
CSS
盒子屬性，及浮動
2020-12-09
HTML CSS 浮動佈局⑤
2020-12-14
HTMLCSS
深入理解CSS浮動
2016-04-16
CSS
什麼是浮動IP
2014-08-25
帶你熟悉CSS浮動
2016-05-14
CSS
7. CSS 的浮動
2024-03-30
CSS
CSS3中的浮動
2020-04-04
CSSS3
CSS清除浮動方法大全
2018-11-28
CSS
常用CSS樣式2：浮動
2018-11-14
CSS
浮動流元素排列規則
2020-11-09
CSS——浮動佈局（補充）
2020-12-27
CSS