前端研习录（09）——CSS浮动与清除浮动

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

一、CSS浮动

重拾前端记忆，记录学习笔记，现在进入CSS浮动部分，它可以通过增加一个浮层来放置内容的方式处理上篇中所提到的【标准流】的尴尬点，下面我们就来看一下呢

1、定义浮动

通过float属性定义元素向哪个方向浮动，任何元素都可以浮动

float: left 元素向左浮动
float: right; 元素向右浮动

注意：浮动使元素脱离了文档流，且浮动只有左右浮动，没有上下浮动
脱离文档流后，元素相当存在于页面上的一个“浮层”中，可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的浮动页面，所以会出现折叠，举例如下：

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>清风不渡title>


    <style>

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: green;
        }

    style>
head>
<body>
        <div class="box1">div>
        <div class="box2">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

效果如下，可以看出由于div是块级元素，所以会上下摆放：

在这里插入图片描述
现在我们设置box1为向左浮动，再来看看效果，如下：

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>清风不渡title>


    <style>

        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: green;
        }

    style>
head>
<body>
        <div class="box1">div>
        <div class="box2">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

效果如下：
在这里插入图片描述
可以看出，像是红色小框覆盖到了绿色大框上一样，出现了重叠。
同理，如果设置了向右浮动，box1则会与box2处于同一行并向页面右方对齐，只是不在一个层面上罢了

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>清风不渡title>


    <style>
        div{
            width: 100px;
            height: 100px;
            float: left;
        }
        .box1{

            background-color: green;
        }
        .box2{
            background-color: yellow;
        }

        .box3{
            background-color: red;
        }
    style>
head>
<body>
        <div class="box1">div>
        <div class="box2">div>
        <div class="box3">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

效果如下：
在这里插入图片描述
注意：当容器不足以横向摆放内容时，则会在下一行进行摆放

二、清除浮动

我们提到，浮动可以有效解决“标准流”带来的尴尬，那么为什么又要清除浮动呢？那么就来看下浮动所带来的弊端吧

1、浮动的副作用

（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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            background-color: darkgray;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
    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

效果如下：
在这里插入图片描述

可以看出，若子元素不存在浮动时，当父元素container没有定义高度，则高度会自动显示为所有子元素高度之和，下面我们来给子元素定义向左浮动，代码如下：

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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            background-color: darkgray;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
            float: left;
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
    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

效果如下：
在这里插入图片描述

父元素好像不见了，我们来打开检查观察下：

在这里插入图片描述
可以看出，父元素还是存在的，只是因为子元素存在于“浮层”中，从而导致存在于页面本身的父元素高度变成了0，这个就是所谓的“父元素高度塌陷”

（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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            background-color: darkgray;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
            float: left;
        }
        .nextbox{
            width: 100px;
            height: 100px;
            background-color: yellow;

        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="nextbox">div>
    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

效果如下：
在这里插入图片描述
可以看到，nextbox元素被浮动的box元素进行了覆盖，而父元素container为什么又有了高度呢？是因为处于同一层的nextbox元素具有高度，与处于“浮层”的box元素毫无关系！

2、清除浮动

由于存在上述浮动的弊端，所以必须需要我们来清除浮动所带来的副作用，方法大致有以下几种：

对父元素设置高度
对受影响的元素增加clear属性
overflow清除浮动
伪对象的方式
以下进行一一说明：

（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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            height: 300px;
            background-color: darkgray;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
            float: left;
        }
        .nextbox{
        width: 100px;
        height: 100px;
        background-color: yellow;
    
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="nextbox">div>
    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

效果如下：
在这里插入图片描述
可以看到，父元素的高度是有了，但是在同一父元素下的后续元素还是被覆盖的，请看第二种方法。

（2）对受影响的元素增加clear属性

语法：

clear : left | right | both

left 清除左浮动
right 清除右浮动
both 清除所有浮动

通过这个可以清除浮动带来的弊端，代码如下：

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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            height: 300px;
            background-color: darkgray;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
            float: left;
        }
        .nextbox{
        width: 100px;
        height: 100px;
        background-color: yellow;
        clear: both;
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="nextbox">div>
    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

效果如下：
在这里插入图片描述

（3）overflow清除浮动

如果存在父元素高度塌陷，且需要父元素保持所有子元素高度相加的值为高度时，可通过overflow清除浮动
注意：这种情况下，父级元素不能设置高度，直接在父级标签的样式中加overflow:hidden属性即可，代码如下：

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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            background-color: darkgray;
            overflow: hidden;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
            float: left;
        }
        .nextbox{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        clear: both;
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="nextbox">div>
    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

效果如下：
在这里插入图片描述

（4）伪对象方式

如果存在父元素高度塌陷，且需要父元素保持所有子元素高度相加的值为高度时，可通过伪对象的方式处理
注意：这种情况下，父级元素不能设置高度
为父标签添加伪类after设置空的内容，并且使用clear:both即可，代码如下：

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>清风不渡title>


    <style>       
        .container{
            width: 500px;
            background-color: darkgray;
        }
        .container::after{
            content: "";
            display: block;
            clear: both;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:5px;
            float: left;
        }
        .nextbox{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 5px;
        clear: both;
        }
    style>
head>
<body>
    <div class="container">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="nextbox">div>
    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

效果如下：
在这里插入图片描述

相关阅读:
lsf基础命令
 openEuler 22.03 LTS 安装 Docker CE 和 Dcoker Compose
【前端精进之路】JS篇：第11期深拷贝与浅拷贝
 【PostgreSQL】主键添加自增
 038：vue页面头部提示低版本浏览器升级问题
 2022 云原生编程挑战赛圆满收官，见证冠军战队的诞生
 Linux文件系统的功能规划
 消息队列的概念和原理
 MyBatis入门案例
 SpringCloudAlibaba Gateway(二)详解-内置Predicate、Filter及自定义Predicate、Filter
原文地址：https://blog.csdn.net/WXKKang/article/details/126024032