css浮动（为什么要清除浮动？清除浮动有哪几种方式？）

已于 2023-08-16 09:16:54 修改
阅读量960 收藏 3
点赞数
分类专栏： css 文章标签： css 前端
于 2023-08-15 23:01:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lllmtx/article/details/132309072
版权

为什么要清除浮动？

清除·浮动主要是为了清除浮动元素造成的影响，使浮动元素不会影响其后元素的布局

  • 防止父元素高度塌陷：当元素浮动后，它会脱离一个标准文档流，不再占用原先的布局空间。如果一个父元素内只有浮动元素，那么该父元素的高度会塌陷为0。清除浮动可以解决这个问题，使父元素根据浮动元素的高度自动扩展高度。
  • 防止浮动元素覆盖后续元素：当元素浮动后，后续元素会忽略它并填补其原先的空间。这可能导致浮动元素覆盖后续元素，影响页面布局。清除浮动可以解决这个问题，保证浮动元素不会影响后续元素的布局。
  • 方便给浮动元素添加边距：当元素浮动后，它的外边距不会影响其后元素的布局。如果不清除浮动，添加边距只会使浮动元素覆盖更大的区域，而不会真正创建边距空间。清除浮动可以使外边距生效，真正产生边距效果。
  • 使浮动布局更加可控：通过清除浮动，可以很好地解决浮动布局带来的各种问题，使浮动元素不会对布局产生意想不到的影响。这使得浮动布局变得更加可控。

清除浮动有哪几种方式？

  • 清除浮动元素后的第一个块级元素添加clear属性，值为浮动方向（left、right、both）。这会强制该元素不允许浮动元素影响其布局。
  • 父元素添加overflow属性，值为hidden或auto。这会创建一个BFC（块级格式化上下文），内部的浮动元素不会影响外部元素。
  • 父元素添加after伪元素，并设置clear属性。这会向父元素添加一个清除浮动的元素。
  • 父元素手动添加高度（不推荐）

演示

1.（1）因为浮动，p元素和两个child元素仿佛同在第一行

image-20230815224047974

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            height: 300px;
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <p>我是p元素</p>
    </div>
</body>
</html>

（2）p元素添加clear属性

image-20230815224021901

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            height: 300px;
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <p>我是p元素</p>
    </div>
</body>
</html>

2.（1）父元素高度塌陷

image-20230815224223632

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <!-- <p>我是p元素</p> -->
    </div>
</body>
</html>

（2）解决方式

image-20230815224449708

  • 方式一：清除浮动元素后的第一个块级元素添加clear属性，值为浮动方向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <!-- <p>我是p元素</p> -->
        <div class="clear"></div>
    </div>
</body>
</html>
  • 方式二：父元素添加after伪元素，并设置clear属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        /* .clear {
            clear: both;
        } */
        /* 伪元素默认是行元素 */
        #main::after {
            content: "";
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <!-- <p>我是p元素</p> -->
        <div class="clear"></div>
    </div>
</body>
</html>

image-20230815225707305

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        /* .clear {
            clear: both;
        } */
        /* 伪元素默认是行元素 */
        #main::after {
            content: "";
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }
        #main2 {
            background: #000000;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
    <div id="main2">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>

image-20230815225944349

父元素添加overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        /* .clear {
            clear: both;
        } */
        /* 伪元素默认是行元素 */
        #main::after {
            content: "";
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }
        #main2 {
            background: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
    <div id="main2">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>
lllmtx123
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
09-25
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7以下无特殊说明均指 windows 平台的 IE浏览器
css清除浮动的几种方法以及对应规范说明
09-25
以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个元素会向下移动，直到它不在与任何浮动元素相邻。这通常用于浮动元素之后的非浮动元素，或者在...
面试题22：为什么需要清除浮动？清除浮动的方式
qq_51066068的博客
04-26 2198
面试官：请问为什么需要清除浮动？清除浮动的方式 浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。 浮动的工作原理： 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象） 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的.
css为什么要清除浮动
苏苏就是小苏苏的博客
06-23 432
1.先看效果 2.代码： <view class="f"> <view class="f1">1</view> <view class="f1">1</view> </view> .f{ border: 1px solid red; background:#ccc; padding: 30rpx; margin: 20rpx; } .f1{ float: left; border: 1px soli
CSS为何清除浮动以及清除浮动方法总结
qq_59079803的博客
02-27 1833
CSS为何清除浮动以及清除浮动方法总结 一，浮动布局的注意点 浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后再用内部子元素采取浮动排列左右位置 一个元素浮动了，理论上其余的兄弟元素也要浮动：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流 二，为什么需要清除浮动？ 由于父级盒子在很多的情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0，就会影响下面的标准流盒子 由于浮动元素不再占有原文档流的位置，所以会对后面的元素排版产生影响 三，清除浮动的本质 1
css 盒模型 文档流 几种清除浮动的方法实例详解
09-22
在本文中，我们将深入探讨这些概念，并提供几种清除浮动的方法。 首先，让我们理解盒模型。盒模型分为两种类型：W3C标准盒模型（content-box）和IE盒模型（border-box）。默认情况下，大部分浏览器使用W3C标准盒...
css别忘记清除浮动clear:both
10-30
本文将详细介绍几种常用的清除浮动的方法，并分析各自的优缺点。 #### 一、使用空标签清除 这种方法是最简单的清除浮动方式之一，只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签，并应用`clear:both;`...
CSS 清除浮动Clear
09-25
清除浮动主要有以下几种方法： 1. 使用`clear`属性：我们可以为紧跟在浮动元素后的元素添加`clear`属性，如`clear: both;`。这将阻止该元素在左右两侧都有浮动元素的情况下与它们排列在同一行。例如： ```css ....
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
为啥要清除浮动呢？
岚之炑的博客
02-20 886
前言 小伙伴们好，我是岚之炑（mu)。在这个春暖花开的季节里，我们又开心的学习了。今天我们一起学习为啥要清楚除浮动。 什么是浮动？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。 html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。 浮动则是元素与元素之间处于不同层级，导致元素发生重叠
CSS基础知识：为什么要清除浮动，清除浮动的本质，清除浮动的语法，清除浮动的四种方法。
最新发布
我就知道你会来，我们一起进步吧！
02-06 736
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0时，就会影响下面的标准流盒子。由于浮动元素不再占有原文档的位置，所以它会对后面的元素排版产生影响。
为什么要清除浮动？清除浮动的方式？
小花猫哒小栗子
06-03 2874
清除浮动是为了清除使用浮动元素产生的影响：浮动的元素，高度会塌陷，而高度的塌陷使我们页面后i按的布局不能正常显示。 清除浮动的方式： 1、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 2、父级添加overflow方法：可以通过触发BFC的方式，实现清除浮动的结果。 优点：代码简洁，慎用，若该父盒子里还有position定位会引起麻烦。 缺点：内容增加多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 ove.
为什么要清除浮动？
Meroy0的博客
08-10 580
为什么要清除浮动？ 是为了解决 父元素因为子元素浮动而引起的内部高度为0的问题。 布局： <body> <div class="father"> <div class="big">盒子1</div> <div class="small">盒子2</div> 大盒子 </div> </b...
CSS为什么要清除浮动？怎么清除？
诉与我听
02-07 426
为什么？ 子元素的浮动导致了父元素高度的塌陷。 怎么办？ 两个方法： 方法一：脚底插入clear:both; 方法二：父元素BFC(ie8+) 方法一： 采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐） 在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。 该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题 代码：...
理解为何需要清除浮动及清除浮动的方法
qq_41672590的博客
01-28 336
一、为何要清除浮动                           ［主要涉及关键词：文档流、高度塌陷。］ 作为一个前端er肯定会要用到float属性。浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高
css为何要清除浮动及清除浮动的方法
Jdoit CW的博客
04-10 309
一：css为何要清除浮动 1.很多情况下，如果我们使用了float特效，出现margin，padding设置不能正确显示，浮动会导致父级子级之间设置了padding，导致了属性不能正常传达，导致margin不能正常显示，所以我们要清除浮动。 2.导致背景不能显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。 3.边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动...
3.12CSS之为什莫要清除浮动
m0_61547956的博客
03-13 165
为什么要清除浮动，以及清除浮动的方法
为何要清除浮动？如何清除？
weixin_30471065的博客
09-05 80
原因： 元素设置了float属性后，就会脱离文档流，当 包含框 的高度小于 浮动框 的时候，会出现高度塌陷。因此才需要清除浮动！ 表现如图：包括框container已经包不住float的图片了！ 清除浮动方法： 1：给 包含框 添加 after伪元素清除浮动。代码： .clearfix:after{ display: block; ...
css中清除浮动的几种方式
04-05
4. 使用display属性，给浮动元素的父元素添加display属性为inline-block或table，可以清除浮动。例如：display:inline-block; 或 display:table; 5. 使用float属性，给浮动元素的父元素添加float属性，可以清除浮动...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值