CSS系列之浮动清除clear（三）

已于 2024-08-28 18:09:41 修改
阅读量145 收藏 2
点赞数 2
分类专栏： 网页前端 文章标签： css 前端
于 2024-08-28 17:25:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013521220/article/details/141643867
版权

一、为什么需要清除浮动

        浮动的原理是让元素脱离文档流，直接浮在桌面上。使用浮动后续添加内容布局可能会产生布局混乱，造成高度坍塌，这时候就可以利用清除浮动来解决父元素高度塌陷的问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>

</html>

 

现在给1号盒子添加一个左浮动float :left，我们来看看会发生什么

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float :left;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>

</html>

我们可以看到2号盒子和1号盒子发生了重叠，那么原因是什么呢，原因是1号盒子漂浮起来了，原本所占的空间空缺出来了，所以2号盒子到了1号盒子的位置。

下面总结5种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）

二、解决方法之clear

直接给第二个盒子添加一个clear:left  这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float :left;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: skyblue;
            clear: left;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>

</html>

三、解决方法之overflow:hidden

overflow这个属性需要添加在父元素上，所以我们给两个盒子添加一个父元素，为了看清楚高度塌陷,我们在添加一个底部盒子，如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box2 {
            width: 80px;
            height: 80px;
            background-color: skyblue;
        }

        .father {
            width: 100%;
            border: 2px solid red;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <div class="bottom">3</div>
</body>

</html>

现在给1号盒子和2号盒子添加浮动,我们来看看会发生什么

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 80px;
            height: 80px;
            background-color: skyblue;
            float: left;
        }

        .father {
            width: 100%;
            border: 2px solid red;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <div class="bottom">3</div>
</body>

</html>

 可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。

解决方法就是:给父元素添加一个overflow:hidden

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 80px;
            height: 80px;
            background-color: skyblue;
            float: left;
        }

        .father {
            width: 100%;
            border: 2px solid red;
            overflow:hidden;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <div class="bottom">3</div>
</body>

</html>

四、解决方法之给父元素添加高度

方法就是给父元素添加一个高度，注意父元素高度的设置一定要大于子元素中高度最高的盒子，以此例子来说就是，子元素中最高的盒子高度是100px，那么父元素的高度一定要大于等于100px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 80px;
            height: 80px;
            background-color: skyblue;
            float: left;
        }

        .father {
            width: 100%;
            height: 100px;
            border: 2px solid red;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <div class="bottom">3</div>
</body>

</html>

这里我们主要看clear方法，认真体会clear的作用和效果，感谢大家的观看，我们下期再见。 

易雪寒
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css之clear 清除浮动
A123ppleQueen的博客
11-20 1920
clear 情况如下 两个div 1.div无浮动 1.代码如下 <!DOCTYPE html> <html lang="en"> <head> <style> div{ width:100px; height:100px; } #d1{ background: rebeccapurple; } #d2{ background: plum; } </style> </head> <body
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1300
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
【CSS】float 浮动 和 clear 清除浮动
qq_45677671的博客
12-30 1062
文章目录1. float （浮动）2. clear（清除浮动）2.1 非浮动元素使用2.2 在浮动元素使用2.3 万能清除浮动法 1. float （浮动） float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 浮动元素会从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。 float 语法： /* 默认为 none 属性值 */ { float : left / right / none / inherit; } 参数说明： -
CSS系列之浮动
StayAlive1887的博客
07-29 523
浮动的由来：块级元素在一行显示，可以使用属性：display: inline-block；浏览器在解析行内块或行内标签的时候，如果标签换行书写会产生一定的距离。两个div转成 inline-block 的时候，可以并排显示，但会有一定的距离，这个距离是因为写div标签的时候换行写了。
CSS系列之浮动详解
老__L的博客
02-02 5773
本文主要介绍CSS的clear属性。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制。移动到指定位置。
CSS 浮动(Float)-清除浮动（Clear）
qq_52499703的博客
06-22 1854
1.浮动的作用： 用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。 2.float属性可以设置以下值之一： left 元素浮动到其容器的左侧 right 元素浮动在其容器的右侧 none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。 inherit - 元素继承其父级的 float 值.........
CSS之清除浮动clear
靡不有初鲜克有终
07-23 320
.box1{ height: 100px; width: 100px; background-color: red; float: left; } .box2{ height: 200px; width: 200px; background-color: yellowgreen; /* * 由于受到bo
CSS清除浮动的三种方法【前端开发】
2401_84097774的博客
04-19 714
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取。
CSS清除浮动方法
rubylLc的博客
04-29 376
当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。
css别忘记清除浮动clear:both
10-30
这种方法是最简单的清除浮动方式之一，只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签，并应用`clear:both;`样式即可。 **示例代码**： ```html .clr { clear: both; } <div id="left">Left ...
CSS的clear属性清除浮动的基本用法示例
09-24
CSS中的`clear`属性是用于解决浮动元素（`float`属性设置为`left`或`right`的元素）引起的布局问题，特别是当这些浮动元素的父容器没有固定高度（`height`设置为`auto`）时。浮动元素会导致它们的父容器高度无法自动...
css系列之浮动博客源码
09-10
3. 浮动清除：如何使用`clear`属性（如`clear: both`）来防止内容被浮动元素影响。 4. CSS优先级：了解如何通过更改选择器的特异性来控制样式的应用。 通过学习这个浮动博客源码，你不仅可以掌握CSS基础，还能...
CSS 清除浮动Clear
09-25
当我们提到“CSS 清除浮动Clear”时，我们实际上是在讨论如何解决由于浮动元素导致的布局问题。 在上述例子中，红色方块通过设置`float: left;`使其浮动到左侧，从而允许蓝色方块与其在同一行。这种布局方式在多列...
执行npm命令一直出现sill idealTree buildDeps怎么办？
易雪寒的博客
04-12 6116
下不是nodejs里面），进入到对应目录下，Mac启动显示隐藏文件操作（Command+Shift+".")也没有发现有这个.npmrc目录。2、打开一个终端，输入下面命令以后才能出现这个文件目录，执行以后就出现上面这个.npmrc目录了。4、你可能还需要重新设置镜像地址，下面两个地址你都试一下，这里我是设置了国外原来镜像地址有用。6、重新执行npm命令（这里我是在VSCode中的终端执行的），终于成功了。1、网上查了一下，有网友说先删除。
手把手教你创建并启动一个Vue3项目（Windows版）
易雪寒的博客
06-19 1607
1、因为npm的资源默认采用国外的，国内执行对应的安装口令会比较慢，所以我们可以把npm资源切换到国内，这样安装框架的速度就会提升。4、验证安装npm是否成功，npm是Node中自带的打包工具，输入npm -version，输出npm版本号即表示安装成功。2、最后如上图显示，我们就完成我们VUE脚手架的安装了，我们在命令窗口用口令查看当前脚手架版本。
手把手教你创建并启动一个Vue3项目（Mac版）
易雪寒的博客
06-19 1294
1、因为npm的资源默认采用国外的，国内执行对应的安装口令会比较慢，所以我们可以把npm资源切换到国内，这样安装框架的速度就会提升。3、上图红色部分，表示在路径C:\Users\xulijun下成功创建了一个名称叫my-vue-app的vue3项目，我们可以输入下面命令启动这个vue3新项目。2、运行完成后并没有提示，但是可以运行查看口令，验证是否切换成功。
CSS系列之Float浮动（二）
最新发布
易雪寒的博客
08-28 379
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动代码案例欣赏：/* 浮动的标签 顶对齐 *//* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */.one {.two {/* 因为有浮动, 不能生效 - 盒子无法水平居中 */.three {
CSS系列之Position定位（一）
易雪寒的博客
08-27 284
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。粘性定位的元素是依赖于用户的滚动，在。HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。元素的位置相对于浏览器窗口是固定位置。相对定位元素的定位是相对其正常位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

易雪寒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值