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

清风不渡

已于 2022-07-27 23:45:33 修改

阅读量388

点赞数 2

分类专栏：前端研习录文章标签： css 前端 css3

于 2022-07-27 22:29:18 首次发布

本文链接：https://blog.csdn.net/WXKKang/article/details/126024032

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（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>

效果如下，可以看出由于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>

效果如下：
在这里插入图片描述
可以看出，像是红色小框覆盖到了绿色大框上一样，出现了重叠。
同理，如果设置了向右浮动，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、浮动的副作用

（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>

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

可以看出，若子元素不存在浮动时，当父元素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>

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

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

在这里插入图片描述
可以看出，父元素还是存在的，只是因为子元素存在于“浮层”中，从而导致存在于页面本身的父元素高度变成了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>

效果如下：
在这里插入图片描述
可以看到，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>

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

（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>

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

（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>

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

（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>

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

清风不渡

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端研习录（09）——CSS浮动与清除浮动

重拾前端记忆，记录学习笔记，现在进入CSS弹浮动部分，它可以通过增加一个浮层来放置内容的方式处理上篇中所提到的【标准流】的尴尬点，下面我们就来看一下呢通过float属性定义元素向哪个方向浮动，任何元素都可以浮动注意：浮动使元素脱离了文档流，且浮动只有左右浮动，没有上下浮动脱离文档流后，元素相当存在于页面上的一个“浮层”中，可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的浮动页面，所以会出现折叠，举例如下：效果如下，可以看出由于div是块级元素，所以会上下摆放：现在我
复制链接

扫一扫