首页 CSS

# CSS 浮动

# 浮动的作用

  • 早期的作用 : 图文环绕

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>浮动图文环绕实线</title>
          <style>
              img {
                  float: left;
              }
          </style>
      </head>
      <body>
      <img src="images/1.jpg" alt="i.jpg">
      爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了爱上对方过后就哭了
      </body>
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34

        * ![image-20220303173437305](https://cdn.jsdelivr.net/gh/Wongbuer/typora/202203031734476.png)

      * 现在的作用 : ==网页布局==

        * ```html
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>浮动网页布局</title>
              <style>
                  div {
                      width: 100px;
                      height: 100px;
                  }
          
                  .one {
                      background-color: pink;
                      float: left;
                  }
          
                  .two {
                      background-color: skyblue;
                      float: left;
                      /*float: right;*/
                  }
              </style>
          </head>
          <body>
          <div class="one">one</div>
          <div class="two">two</div>
          </body>
          </html>

    • image-20220303173517392

# 浮动的特点

  1. 浮动的标签会脱离标准流 (简称：脱标), 在标准流中不占位置

    • 想到与从地面飘到了空中

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>浮动的特点</title>
          <style>
              .one {
                  width: 100px;
                  height: 100px;
                  background-color: pink;
                  float: left;
              }
              .two {
                  width: 200px;
                  height: 200px;
                  background-color: skyblue;
              }
              .three {
                  width: 300px;
                  height: 300px;
                  background-color: orange;
              }
          </style>
      </head>
      <body>
          <div class="one">one</div>
          <div class="two">two</div>
          <div class="three">three</div>
      </body>
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77

         * ![image-20220303173944283](https://cdn.jsdelivr.net/gh/Wongbuer/typora/202203031739338.png)

      2. 浮动元素比标准流搞了半个级别, 可以覆盖标准流中的元素

      3. 浮动找浮动, 下一个浮动元素会在上一个浮动元素后面左右浮动

      4. 浮动元素有特殊的显示效果

         * 一行可以显示多个
         * 可以设置宽高



      * 注意点 : 浮动的元素不能通过text-align:center或者margin: 0 auto



      ## 清除浮动

      * 含义 : ==清除浮动带来的影响==
        * 影响 : 如果子元素浮动了, 此时子元素不能撑开标准流的块级元素
      * 原因 : 
        * 子元素浮动之后脱标→不占位置
      * 目的 : 
        * 需要父元素有高度, 从而不影响其他网页元素的布局





      ### 方法① - 给父级元素添加行高

      ```html
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>清除浮动带来的影响</title>
          <style>
              .top {
                  width: 1000px;
                  /*给父级标签添加行高*/
                  height: 300px;
                  margin: 0 auto;
                  background-color: pink;
              }

              .bottom {
                  height: 100px;
                  background-color: green;
              }

              .left {
                  width: 200px;
                  height: 300px;
                  background-color: #ccc;
                  float: left;
              }
              
              .right {
                  width: 790px;
                  height: 300px;
                  background-color: skyblue;
                  float: right;
              }
          </style>
      </head>
      <body>
          父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 会显示到上面的位置
          <div class="top">
              <div class="left"></div>
              <div class="right"></div>
          </div>
          <div class="bottom"></div>
      </body>
      </html>
# 方法② - 父元素内容最后添加块级元素
  • 操作 :
    1. 在父元素内容的最后添加一个块级元素
    2. 给添加的块级元素设置 clear:both
  • 特点 :
    • 缺点：会在页面中添加额外的标签，会让页面的 HTML 结构变得复杂
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>额外标签法</title>
    <style>
        .top {
            width: 1000px;
            /*height: 300px;*/
            margin: 0 auto;
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: #ccc;
            float: left;
        }

        .right {
            width: 790px;
            height: 300px;
            background-color: skyblue;
            float: right;
        }

        .clearfix {
            /*清除左右两侧浮动的影响*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
# 方法③ - 单伪元素清除法
  • 操作：用伪元素替代了额外标签
    ① : 基本写法
    1
    2
    3
    4
    5
    .clearfix::after {
    	content: '';
    	display: block;
    	clear: both;
    }
    ② : 补充写法
    1
    2
    3
    4
    5
    6
    7
    .clearfix:after {
    content: '';
    display: block;
    clear: both;
    width: 0;
    visibility: hidden;
    }
# 方法④ - 双伪元素清除法
  • 操作 :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix:before,
    .clearfix:after {
    	content: '';
    	display: table;
    }

    .clearfix::after {
    	clear: both;
    }
  • 特点 :
    • 优点：项目中使用，直接给标签加类即可清除浮动
# 方法⑤ - 给父元素设置 overflow: hidden
  • 操作 :
    1. 直接给父元素设置 overflow: hidden
  • 特点 :
    • 优点：方便
 
 更新于   阅读次数  次