css浮动

CSS 浮动

传统网页布局方式

在学习浮动之前，先了解传统的网页布局方式。

常见网页布局方式有：

  • 标准流，也叫普通流、文档流
  • 浮动
  • 定位
  • Flexbox
  • Grid

标准流

  • 标准流是网页按照元素的书写顺序依次排列。
  • 块级元素默认独占一行。
  • 行内元素默认在一行内从左到右排列。

浮动

基本概念

  • 浮动会让元素脱离标准文档流。
  • 元素会根据开发者设置向左或向右移动。
  • 浮动通常是在父元素内部进行移动。

基本语法

1
2
3
选择器 {
  float: left;
}
1
2
3
选择器 {
  float: right;
}
1
2
3
选择器 {
  float: none;
}

注意点

  • 浮动是相对于父元素进行的。
  • 浮动元素只会在父元素的内部移动。

浮动的三大特性

  • 脱标：脱离标准流
  • 一行显示，顶部对齐
  • 具备行内块元素特性

知识点理解

  • 脱离标准流后，后面的普通元素会受到影响。
  • 多个浮动元素可以排在同一行。
  • 浮动后的元素既可以同排显示，也能设置宽高。

清除浮动

为什么要清除浮动

  • 子元素浮动后，父元素有时无法自动撑开高度。
  • 这会导致父元素高度塌陷，影响后续布局。

常见清除方式

1. 伪元素清除浮动

1
2
3
4
5
.father::after {
  content: "";
  display: block;
  clear: both;
}

2. overflow 清除浮动

1
2
3
.father {
  overflow: hidden;
}

课堂完整示例代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .father{
            /* height: 200px; */
            background-color: yellow;
            border: 3px solid black;
            /* overflow: hidden; */
        }
        .father::after{
            content: "";
            display: block;
            clear: both;
        }
        .left-son{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    <p>这是一行段落这是一行段落这是一行段落这是一行段落这是一行段落这是一行段落这是一行段落这是一行段落</p>
</body>
</html>

知识点总结

  • 浮动是传统布局的重要方式之一。
  • float 常见取值有 left、right 和 none。
  • 浮动元素会脱离标准流。
  • 使用浮动时经常需要清除浮动，避免父元素高度塌陷。

复习表达

CSS 浮动是传统网页布局方式之一，通过 float 属性可以让元素向左或向右排列。浮动元素会脱离标准流，具备一行显示和可设置宽高的特点。实际开发中，浮动常常会导致父元素高度塌陷，因此通常需要通过伪元素或 overflow 的方式来清除浮动。