个人博客
0%

【CSS】CSS浮动

发表于 分类于

介绍页面布局十分常用的方法：浮动

1 浮动

1.1 传统网页布局

  • （1）普通流（标准流）
    • 标签按照规定好的默认方式排列
  • （2）浮动
  • （3）定位
  • 一般网页布局包含了这三种布局方式

1.2 浮动介绍

  • float属性用于创建度佛那个框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘
1
float: 属性值;
属性值 描述
none 元素不浮动（默认）
left 元素向左浮动
right 元素向右浮动

1.3 浮动特性

  • （1）浮动元素会脱离标准流
    • 浮动类似在原有的图层上再创建一个图层
    • 浮动之后，不会再保留原先的位置
  • （2）如果多个盒子设置了浮动，会按照属性值在一行内显示并且元素顶部对齐
    • 只有浮动盒子和浮动盒子之间才会在同一行
    • 前一个盒子没有浮动，后一个盒子浮动了，也不会变成在同一行显示（浮动只会影响后面标准流的盒子，不影响前面的）
  • （3）浮动元素具有行内块元素特性（可以设置宽高，可以在一行内显示，可以按照内容自动设置宽度）
    • 不管什么元素，添加了浮动，都具有行内块元素特性

1.4 使用技巧

  • 浮动元素经常和标准流父级搭配使用

2 浮动实例

2.1 小米布局1

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>小米布局</title>
  <style>
    /*父盒子布局*/
    .box {
      width: 1200px;
      height: 460px;
      background-color: pink;
      margin: 100px auto;
    }

    /*左子盒子布局*/
    .box .left {
      width: 230px;
      height: 460px;
      background-color: #b0b0b0;
      float: left;
    }

    /*右子盒子布局*/
    .box .right {
      width: 970px;
      height: 460px;
      background-color: #ff8500;
      float: left;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

2.2 小米布局2

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>小米布局2</title>
  <style>
    /*清除页面自带内外边距*/
    * {
      margin: 0;
      padding: 0;
    }

    /*父盒子布局*/
    ul {
      width: 1226px;
      height: 285px;
      background-color: pink;
      margin: 100px auto;
    }

    /*子盒子布局*/
    ul li {
      width: 296px;
      height: 285px;
      background-color: #cccccc;
      list-style: none;
      float: left;
      margin-right: 14px;
    }

    /*清除最后一个子盒子的外边距，避免塞不进同一行*/
    ul .last {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="last"></li>
  </ul>
</body>
</html>

2.3 小米布局3

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>小米布局3</title>
  <style>
    /*父盒子布局*/
    .box {
      width: 1226px;
      height: 615px;
      background-color: pink;
      margin: 100px auto;
    }

    /*左子盒子布局*/
    .box .left {
      float: left;
      width: 234px;
      height: 615px;
      background-color: #cccccc;
    }

    /*右子盒子布局*/
    .box .right {
      float: left;
      width: 992px;
      height: 615px;
      background-color: skyblue;
    }

    /*右子子盒子布局*/
    .box .right>div {
      float: left;
      width: 234px;
      height: 300px;
      background-color: greenyellow;
      margin-left: 14px;
      margin-bottom: 14px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"></div>
    <div class="right">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>

3 常见网页布局

4 清除浮动

  • 有时候，在一个标准流的父盒子里不清楚要装多少个浮动的子盒子，就不适宜把父盒子的高度定死。但是盒子一旦浮动就会脱离标准流，不能自动撑开父盒子，所以需要使用浮动清除来解决。

4.1 清除浮动本质

  • 清除浮动的本质，就是清除浮动后造成的影响
  • 清除浮动后，父盒子会根据浮动的子盒子自动检测高度。父盒子有高度后，就不会影响下面的标准流

4.2 使用

1
clear 属性值
属性值 描述
left 不允许左侧有浮动元素（消除左侧浮动的影响）
right 不允许右侧有浮动元素（消除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

4.3 清除浮动的方法

  • （1）额外标签法（隔离法）
    • 在最后一个浮动的标签后面，添加一个新的块级空标签，样式为clear: both
    • 例：<div style="clear: both" />
  • （2）父级添加overflow属性
    • 给标签添加overflow: hidden | auto | scroll三者都可以
  • （3）父级添加after属性
    • 额外标签法的升级版，after伪元素类似在标签后面创建一个新的空标签，只是用css来生成，不是直接写在网页上
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      /*写法固定，暂不作解析*/
      .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

      /*IE6、7专有*/
      .clearfix {
        *zoom: 1;
      }
  • （4）父级添加双伪元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /*在前后都插入一个空标签*/
    .clearfix:before, .clearfix:after {
      content: "";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }

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