学习CSS之清除浮动

原创 已于 2025-05-28 13:36:28 修改 · 585 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#学习 #css #前端 #html
于 2025-05-28 13:35:33 首次发布

一、clear:both

1 概念

根据CSS规范，clear:both要求：该盒子必须出现在所有左浮动和右浮动盒子的下方。
如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有浮动盒。

2 例如

设置浮动后，父盒没有设置高度，其高度由子盒撑开，若子盒全部浮走，则高度为0

会造成高度塌陷：

<!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>
        nav{
            background-color: bisque;
            border: black 5px solid;
        }
        #hezi1{
            width: 300px;
            height: 50px;
            background-color: aqua;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
            
        }
        #hezi2{
            width: 300px;
            height: 50px;
            background-color: aquamarine;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi3{
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #hezi4{
            width: 300px;
            height: 50px;
            background-color: brown;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi5{
            width: 300px;
            height: 50px;
            background-color: blueviolet;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        nav::after{
            content: "";
            clear: both;
        }
        footer{
            height: 50px;
            background-color: yellow;
            border: black 3px solid;
        }
    </style>
</head>
<body>
    <nav>
        <div id="hezi1">盒子1</div>
        <div id="hezi2">盒子2</div>
        <div id="hezi3">盒子3</div>
        <div id="hezi4">盒子4</div>
        <div id="hezi5">盒子5</div>
    </nav>
    <footer id="footer1">footer1</footer>
    <footer id="footer2">footer2</footer>
    <footer id="footer3">footer3</footer>

</body>
</html>

 用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>
        nav{
            background-color: bisque;
            border: black 5px solid;
        }
        #hezi1{
            width: 300px;
            height: 50px;
            background-color: aqua;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
            
        }
        #hezi2{
            width: 300px;
            height: 50px;
            background-color: aquamarine;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi3{
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #hezi4{
            width: 300px;
            height: 50px;
            background-color: brown;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi5{
            width: 300px;
            height: 50px;
            background-color: blueviolet;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        nav::after{
            content: "";
            clear: both;
        }
        footer{
            height: 50px;
            background-color: yellow;
            border: black 3px solid;
        }
    </style>
</head>
<body>
    <nav>
        <div id="hezi1">盒子1</div>
        <div id="hezi2">盒子2</div>
        <div id="hezi3">盒子3</div>
        <div id="hezi4">盒子4</div>
        <div id="hezi5">盒子5</div>
        <!-- 下面这个块元素，无实际显示效果，只是为了撑开父盒，
        解决父盒高度塌陷问题，避免影响父盒的兄弟盒子 -->
        <div style="clear: both;"></div>
    </nav>
    <footer id="footer1">footer1</footer>
    <footer id="footer2">footer2</footer>
    <footer id="footer3">footer3</footer>

</body>
</html>

 二、clear:left

1 概念

根据 CSS 规范，clear:left要求：该盒子必须出现在所有左浮动盒子的下方。
如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有左浮动盒。

2 例如

设置clear:left只会撑开左浮动的盒子，右浮动的盒子不能撑开

<!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>
        nav{
            background-color: bisque;
            border: black 5px solid;
        }
        #hezi1{
            width: 300px;
            height: 400px;
            background-color: aqua;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
            
        }
        #hezi2{
            width: 300px;
            height: 500px;
            background-color: aquamarine;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi3{
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #hezi4{
            width: 300px;
            height: 500px;
            background-color: brown;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi5{
            width: 300px;
            height: 50px;
            background-color: blueviolet;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        nav::after{
            content: "";
            clear: both;
        }
        footer{
            height: 50px;
            background-color: yellow;
            border: black 3px solid;
        }
    </style>
</head>
<body>
    <nav>
        <div id="hezi1">盒子1</div>
        <div id="hezi2">盒子2</div>
        <div id="hezi3">盒子3</div>
        <div id="hezi4">盒子4</div>
        <div id="hezi5">盒子5</div>
        <!-- 下面这个块元素，无实际显示效果，只是为了撑开父盒，
        解决父盒高度塌陷问题，避免影响父盒的兄弟盒子 -->
        <div style="clear: left;"></div>
    </nav>
    <footer id="footer1">footer1</footer>
    <footer id="footer2">footer2</footer>
    <footer id="footer3">footer3</footer>

</body>
</html>

 三、clear:right

1 概念

根据 CSS 规范，clear:right要求:该盒子必须出现在所有右浮动盒子的下方。
如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有右浮动盒。

2 例如

设置clear:left只会撑开右浮动的盒子，左浮动的盒子不能撑开

<!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>
        nav{
            background-color: bisque;
            border: black 5px solid;
        }
        #hezi1{
            width: 300px;
            height: 500px;
            background-color: aqua;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
            
        }
        #hezi2{
            width: 300px;
            height: 400px;
            background-color: aquamarine;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi3{
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #hezi4{
            width: 300px;
            height: 400px;
            background-color: brown;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #hezi5{
            width: 300px;
            height: 50px;
            background-color: blueviolet;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        nav::after{
            content: "";
            clear: both;
        }
        footer{
            height: 50px;
            background-color: yellow;
            border: black 3px solid;
        }
    </style>
</head>
<body>
    <nav>
        <div id="hezi1">盒子1</div>
        <div id="hezi2">盒子2</div>
        <div id="hezi3">盒子3</div>
        <div id="hezi4">盒子4</div>
        <div id="hezi5">盒子5</div>
        <!-- 下面这个块元素，无实际显示效果，只是为了撑开父盒，
        解决父盒高度塌陷问题，避免影响父盒的兄弟盒子 -->
        <div style="clear: right;"></div>
    </nav>
    <footer id="footer1">footer1</footer>
    <footer id="footer2">footer2</footer>
    <footer id="footer3">footer3</footer>

</body>
</html>

四、盒子的展示

display属性（用于元素性质的转换）

inline 以行内元素展示

block 以块元素展示

none 隐藏

块元素 可以设置宽高属性，独占一行，例如：h1，p

行内元素 不可以设置宽高属性，不独占一行，例如：b，ins

行内块元素 可以设置宽高属性，不独占一行，例如：img

隐藏none 整个盒子隐藏（并释放文档流位置）

Fighting！

Python极坐标绘图实战：从基础图表到高级场图，掌握28种函数应用
最新发布
weixin_30781775的博客
05-18 510
本文详细介绍了Python中使用Matplotlib进行极坐标绘图的实战技巧，涵盖从基础曲线到高级场图的28种函数应用。通过具体代码示例，展示如何创建雷达图、风向图、声波辐射图等专业可视化效果，帮助读者掌握极坐标下的数据展示与性能优化方法。
详解CSS `clear` 属性及其各个选项
engchina的专栏
02-02 1525
详解CSS `clear` 属性及其各个选项
清除浮动的4种方式
热门推荐
田兴的博客
07-27 5万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 当我给内部两个盒子加上float属性的时候 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法（最常用的4种） 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点： 通俗易懂，书写方便。（
2020-10-23
cxxhhzsl的博客
10-23 441
胃小菜 来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。 我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。 第二个div中的li，去贴第一个div中最后一个li的边了。 原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。 清除浮动方法1:给浮动的元素的祖先元素加上高度 如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮
css中clear:both属性的理解及用法
Sfh的博客
06-27 1万+
css中clear:both属性的作用是清除浮动，设置了浮动就会破坏文档流结构，影响后边的布局，此时在设置清除浮动便可解决这一问题，可以认为，设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响 对比设置和不设置clear:both的结果来说明 <style> .test-title{ background-color: orange; } .test-con
清除浮动的五种常用的方法（ 解决方法 详细解释 原理 产生原因 ）
zhp19513507633的博客
07-20 7275
清除浮动的五种常用的方法（ 解决方法 详细解释 原理 产生原因 ）
前端小白对CSS浮动与清除浮动学习总结
2201_75294326的博客
05-17 1033
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
web前端学习15-css浮动与浮动清除
M_chen_M的博客
03-25 202
为text增加clear属性，both指左右列表都清楚浮动。受影响的元素增加clear属性。eg:后续元素被遮盖。
CSS学习-浮动及清除浮动
wanglingli95的博客
01-05 450
一、什么是浮动？ 在了解什么是浮动之前我们先了解一下html元素在标准流排列方式。在标准流中，元素是按照它在 HTML 中出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。 常见标准流排版规则： 1. 块级元素：从上往下，垂直布局，独占一行2. 行内元素：从左往右，水平布局，空间不够自动折行 二、浮动的作用 ➢ 早期的作用：图文环绕 ➢ 现在的作用：网页布局 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在
深入学习css系列之清除浮动
StayAlive1887的博客
07-12 154
1.欢迎来到我的酒馆         
CSS学习12--清除浮动的本质及处理办法
qq_54641174的博客
09-04 1044
清除浮动
前端小白对CSS浮动与清除浮动学习总结，2024年最新零基础学习前端开发
2401_83947105的博客
04-10 468
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
CSS学习清除浮动
momomomommomo的博客
06-03 195
clear: right ：盒子须在所有右浮动盒子下方，若有右浮动，浏览器移动盒子到无右浮动处，重算高度包含右浮动。- clear: left ：盒子须在所有左浮动盒子下方，若有左浮动，浏览器移动盒子到无左浮动处，重算高度包含左浮动。- clear: both ：盒子须在所有左/右浮动盒子下方，若前方有浮动盒子，浏览器重算高度直到包含所有浮动。
css清除浮动，以及BFC的学习
yiyueqinghui的博客
07-12 287
1、浮动的定义 浮动元素停止的标准：浮动的元素可以向左或向右移动，直到它的外边框碰到父元素的边框或者其他浮动框的边框为止！（注意是其他浮动框的边框！敲黑板！） 浮动的元素不在普通文档流中 2、不清除浮动的影响 导致页面布局混乱 无法撑开父元素的高度 清除浮动是指清除浮动所造成的影响。 3、清除浮动的方法 3.1 加高法 给浮动的元素的祖先元素添加高度 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素，也就清除浮动带来的影响了 工作上，我们不会给所有的盒子加高度，因为麻烦，并
CSS学习之清除浮动
Return_false的专栏
09-06 2358
在介绍浮动之前，有必要了解一下行内标签和块属性标签 1.行内元素：又称内嵌或者内联 内嵌(内联、行内)的特征(inline)     1、同排可以继续跟同类的标签     2、内容撑开宽度     3、不支持宽高     4、不支持上下的margin和padding     5、代码换行被解 常见的行内标签：                  2.块属性标签 块属性
CSS学习Day7之浮动和清除浮动
Ishaq_Li的博客
12-22 212
CSS布局之浮动（float） 浮动的背景 可以实现网页中盒子的多列排版布局 一栏布局 两栏布局 多栏布局 浮动属性 属性值：none 描述：表示不浮动，默认情况 属性值：left 描述：左浮动 属性值：right 描述：右浮动 属性值：inherit 描述：继承父级元素的浮动属性 浮动的现象 了解网页中的文字环绕现象 <!DOCTYPE html> <html> <head> <title>文字环绕</title> <st
css 高度塌陷_CSS浮动和清除浮动学习
weixin_30818373的博客
12-27 136
什么是浮动？css浮动就是浮动元素会脱离文档的普通流并向左或右浮动，例子如下添加了浮动的盒子会进行左右排列在最初的设计初衷，浮动就是为了实现文字环绕效果浮动的特性a.会脱离文档来看个例子如上图所示，在默认的情况下，块状元素会独占一行，子元素会上下排列，由于给子元素添加了浮动，脱离文档，不会影响普通元素的布局，左右进行排列，直到遇到下一个浮动元素，总结：一旦元素浮动了，他将可以并排显示了，并且可以设...
【CSS基础学习笔记】浮动float、清除浮动
aaatool的博客
06-07 281
CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶普通流(标准流)、浮动、定位。标准流就是标签按照规定好默认方式排列。浮动可以改变元素标签默认的排列方式。网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法：选择器 { float: 属性值;}（属性值取值有：none、left、right）加了浮动之后的元素,会具有以下特性：浮动元素会脱离标准流(脱标)移动到指定位置，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值