发布时间：2025-12-09 14:06:45 浏览次数：4
一、什么是 CSS clear清除浮动？
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
clear属性值：
left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素
right清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素
both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素
none，就是不做任何处理，不清除任意一边的浮动元素
inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
二、clear应用场景
①Float 往往是用于图像，就像是办公软件word中的文字坏绕图片的方式设置，
那么clear就是让元素不要坏绕图片，而是自成一行
②float 布局时一样非常有用（让元素脱离正常的文档流）。
那么clear就是让脱离的元素回归到正常的文档流中。
清除图片浮动应用实例：
实例：图片浮动在左边，后面的元素清除左边的浮动，就是不要让p的左边存在 带有 浮动属性 的 元素。
那么p元素就会自己再去成一行了。
p { clear: left; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { float: left; } p { clear: left; } </style></head><body> <p > <img src="http://www.runoob.com/images/klematis_small.jpg" alt="tu1" /> <p>这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 </p> </p></body></html>结果展示：
没有清除浮动 设置清除浮动
布局中清除浮动实例：
float通过浮动设置，让文档脱离正常的标准流。设置了浮动的元素可以紧跟上上一个设置了浮动的元素后面，不再自成一行。
clear让这些浮动的元素 后面的元素回归正常的文档流，拥有自己的空间
实例：
设计一个空p，让其两边清除浮动，那么后面的元素就不会被覆盖，拥有自己的空间。
.clearfloat{ clear: both; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><style> body, p { padding: 0; margin: 0; } nav { width: 100%; height: 30px; background-color: gray; } .menu { float: left; width: 20%; height: 300px; background-color: blueviolet; } .banner { float: left; width: 60%; height: 300px; background-color: rosybrown; } .selector { float: left; width: 20%; height: 300px; background-color: yellowgreen; } .clearfloat { clear: both; } .normal { width: 50%; height: 320px; border: 1px dashed green; background: red; }</style><body> <nav>导航导航区域</nav> <p >菜单菜单区域</p> <p >轮播轮播区域</p> <p >查询查询区域</p> <p ></p> <p >这里是正常的文档，没有设置浮动，没有浮动，没有浮动！</p></body></html>结果展示：
清除浮动之后，normal p就有自己的正常空间了。
三、clear 属性各个属性值。
left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素
right清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素
both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素
none，就是不做任何处理，不清除任意一边的浮动元素
inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。
如下代码，1,2,3,4 p元素设置了做浮动，5,6,7 p元素设置了右浮动。
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1, .box2, .box3, .box4, .box5, .box6, .box7 { width: 100px; height: 100px; } .box1, .box2, .box3, .box4 { float: left; } .box5, .box6, .box7 { float: right; } .clear1 { clear: left; } </style></head><body> <p >111</p> <p >222</p> <p >3333</p> <p >444</p> <p >555</p> <p >666</p> <p >777</p></body></html>结果展示：
屁列，说法一样不对，下面的一个例子中box3出现可以清除是可以理解的，box4的加载在最后面怎么也可以清除了？
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
如下，box1 与box3设置为做浮动，box设置为右浮动，下载来给box3设置清除两边浮动，
它们的加载顺序是box1，然后是box2，最终是box3，
代码：
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1, .box2, .box3, .box4, .box5, .box6, .box7 { width: 100px; height: 100px; } .box1, .box3 { float: left; } .box2 { float: right; } .clearboth { clear: both; } </style></head><body> <p >111</p> <p >222</p> <p >3333</p></body></html>结果展示：
给box3设置，3个属性值的效果都是一致的。
box3设置 clear：both box3 设置clear：left
box3设置 clear：right
下面同样的box4设置清除效果。
下载顺序box1，box2，box3，box4，
代码：
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1, .box2, .box3, .box4, .box5, .box6, .box7 { width: 100px; height: 100px; } .box1, .box3 { float: left; } .box2, .box4 { float: right; } .clearboth { clear: both; } .clearleft { clear: left; } .clearright { clear: right; } </style></head><body> <p >111</p> <p >222</p> <p >3333</p> <p >44444</p></body></html>box4设置 clear：both box4设置 clear：left
box4设置 clear：right
box4是在box2后面
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流