css之clear 清除浮动

最新推荐文章于 2025-05-06 14:15:06 发布
原创 最新推荐文章于 2025-05-06 14:15:06 发布
· 2k 阅读 · 5 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨CSS中clear属性的使用，通过多个实例解析如何清除浮动的影响，包括left、right和both的情况，帮助理解浮动元素如何影响文档流并展示不同清除方式的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

哈哈哈哈哈哈哈，我懂了原理啦

clear清除的是浮动的高度（就是跑到位置），而不影响浮动的方向.

原理如下：

clear清除的是元素本身，但不会影响方向。通俗点说就是clear清除的是浮动产生的文档流。举个例子，就是有2个div,当第二个div产生浮动时，第二个div会脱离第二行，到达第一行。当你清除它的时候，清除的就是这个跑的距离。

浮动的特性导致了与想象中的不一样。这特性指脱离文档流和上前补位。只要前面一个元素浮动了，空出了位置，后面一个元素就会跟着往前跑。直到把位置占领了为止。这里比较特殊的一点是，浮动有两个方向，左浮动和右浮动。而脱离文档流的div元素却并不怎么管这件事，他们的逻辑是只要有位置我就可以占领，直到没有位置为止。举个例子，有3个div,第一个div左浮动，此时，第二个div和第三个div会同时往上跑，第二个div就看不见了。但当第二个div也产生了浮动还是向右浮动时，第二个div就会在右边，能被看见，这时第三个div在第一个div下面看不见。当第三个div也向左浮动时，第三个div就会在第一个div的后面，被看见，此时他们成为一行。假设此页面现在一行一共只能容纳5个div，那么在给他一个向左浮动的div,这一行能放下，在给一个div则放不下了，此时这个div会在第一个div下面重新进行顺序排列。

clear

情况如下

两个div

第一：两个div

1.代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

}

#d1{

background: rebeccapurple;

}

#d2{

background: plum;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

效果图如下

</html>

第一 1.两个div左浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

}

#d2{

background: plum;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

效果如下

第一 2.两个div左浮动 第一个div深紫色清除左浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

clear: left;

}

#d2{

background: plum;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果如下

原理如下：第一个深紫色div清除浮动，消除了脱离的文档流，但第一个文档流比较特殊，无法肉眼看见。因为清除并不影响它的方向，div的方向由浮动决定，所以此div还是在左。第二个div所占据的位置本来就是第一div剩下来的，现在第一个div跑回来了，第二个div也只能让位，反正无论如何，第二个div都活着第一个div的阴影下，向左浮动则救助了它，让他活成了自已

第一 3.两个div左浮动 第一个div深紫色清除右浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

clear: right;

}

#d2{

background: plum;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果如下

第一 4.两个div左浮动 第二个div浅紫色清除左浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

}

#d2{

background: plum;

clear: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果图如下

第一 5.两个div左浮动 第二个div 浅紫色清除右浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

}

#d2{

background: plum;

clear: right;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果图如下

第一 6.两个div左浮动,第一个div深紫色都清除

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

clear: both;

}

#d2{

background: plum;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果图如下

第一 7.两个div左浮动 第二个div浅紫色都清除

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width:100px;

height:100px;

float: left;

}

#d1{

background: rebeccapurple;

}

#d2{

background: plum;

clear: both;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果图如下

第一  第一个div左浮动，第二个div右浮动

代码如下

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float: right;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

</body>

</html>

效果图如下

考虑到第一个div比较特殊，于是那第二个和第三个再次实验进行对比

第二.3个div

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

}

#d2{

background: green;

}

#d3{

background: gold;

}

</style>

</head>

<body>

<div id="#d1"></div>

<div id="#d2"></div>

<div id="#d3"></div>

</body>

</html>

效果图如下

第二  1.三个div 给第二个和第三个div进行float

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

}

#d2{

background: green;

float: left;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

第二  2.三个div 第三个元素清除左浮动-------这样考虑 是因为 元素清除浮动只能影响本身

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

}

#d2{

background: green;

float: left;

}

#d3{

background: gold;

float: left;

clear:left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

第三 三个div都加了左浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float: left;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

第三 1.三个div都加了左浮动  第二个元素清除左浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float: left;

clear: left;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

第三 2.三个div都加了左浮动 第二个元素清除右浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float: left;

clear: right;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

第四 这三个div第一个元素和第三个元素左浮动，第二个元素右浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float: right;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

第四 1.这三个div 第一个和第三个左浮动，第二个绿色右浮动 清除第二个右浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float: right;

clear: right;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下：

第四 2.这三个div 第一个和第三个左浮动，第二个绿色右浮动 清除第二个左浮动

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<style>

div{

width: 100px;

height:100px;

}

#d1{

background: red;

float:left;

}

#d2{

background: green;

float:right;

clear:left;

}

#d3{

background: gold;

float: left;

}

</style>

</head>

<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

</body>

</html>

效果图如下

特别例子清除

我希望的效果是清除第4个div的浮动，让他位于前面三个div的下方。

clear:both和clear:left都实现了这个效果。

但是clear:right没有实现这个效果。

个人猜测是因为第四个元素的浮动方向是左侧，所以清除右侧的浮动无效，而clerr:both是两个方向的浮动都清除，所以才有效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  .one,.two,.c{
			  width:100px;
			  height:30px;
			  border:1px solid aquamarine;
			  float:left;
		  }
		  .d{
			  width:400px;
			  height:30px;
			  border:1px solid darkgoldenrod;
			  clear:right;
		  }
		</style>
		</head>
	  <body>
		  <div class="one"></div>
		  <div class="two"></div>
		  <div class="c"></div>
		  <div class="d"></div>
	  </body>
</html>

CSS clear both清除浮动
易天海
01-29 1398
http://www.divcss5.com/rumen/r424.shtml  CSS clear both清除浮动 DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。 接下来我们来认识与学习css clear知识与用法。 一、clear语法与结构 - TOP...
经验分享：CSS浮动(float,clear)通俗讲解
weixin_33714884的博客
03-27 7424
       很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。        写在前面的话：        由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。        如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...
Clear 清除浮动
sunzemin1234的博客
11-21 445
Clear 清除浮动 Clear 清除浮动 Left 清除左浮动 Right 清除右浮动 Both 清除左右浮动 注：清除浮动和本身有没有浮动没有关系。
CSS clear 属性
最新发布
徐尧的博客
05-06 486
使用场景 2.1 清除浮动影响 .footer { clear: both; /* 避免被上方浮动元素影响 */ } 2.2 创建换行效果 .new-section { clear: left; /* 在左浮动元素后换行 */ }
CSS 浮动(Float)-清除浮动（Clear）
qq_52499703的博客
06-22 2006
1.浮动的作用： 用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。 2.float属性可以设置以下值之一： left 元素浮动到其容器的左侧 right 元素浮动在其容器的右侧 none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。 inherit - 元素继承其父级的 float 值.........
【CSS 面经】使用 clear 属性清除浮动的原理
lph159的博客
12-05 1269
也就是说，父容器无法感知浮动元素的存在，可能会出现父容器高度塌陷的现象，进而影响页面布局的稳定性。假设我们在一个容器中有多个浮动元素，如果没有清除浮动，容器的高度会塌陷。属性应用到父容器或某个特定元素上，便可以清除前面浮动元素的影响，确保父容器的高度能够正确计算。会告诉浏览器：“不要让这个元素与前面的浮动元素重叠，确保它位于浮动元素之后并且不受浮动影响。容器的高度将无法包含浮动元素，导致容器的高度塌陷，从而影响整个页面布局。属性控制一个元素是否能够与前面的浮动元素重叠，常用于清除浮动。
CSS系列之浮动清除clear（三）
徐泗空的博客
08-28 979
可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。直接给第二个盒子添加一个clear:left 这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left。
CSS的clear属性清除浮动的基本用法示例
09-24
清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响，确保非浮动元素或后续元素能够正确地在页面上定位，避免内容溢出容器。这通常是为了恢复父容器的正常高度计算，使其能完全包裹住内部的浮动元素。 **使用`...
css别忘记清除浮动clear:both
10-30
这种方法是最简单的清除浮动方式之一，只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签，并应用`clear:both;`样式即可。 **示例代码**： ```html .clr { clear: both; } <div id="left">Left ...
浅谈CSS中的clear清除浮动
09-24
为了清除浮动，CSS 提供了clear属性。此属性可以使元素避开之前的浮动元素，从而确保自身不会因为前面的浮动元素而改变位置。clear属性有四个取值参数： - none：不禁止任何方向的浮动。 - left：禁止左侧的浮动...
CSS 清除浮动Clear
09-25
当我们提到“CSS 清除浮动Clear”时，我们实际上是在讨论如何解决由于浮动元素导致的布局问题。 在上述例子中，红色方块通过设置`float: left;`使其浮动到左侧，从而允许蓝色方块与其在同一行。这种布局方式在多列...
clear清除浮动标签
Lambo
03-27 947
1、清除浮动clearclear:right 清除右浮动造成的影响clear:left 清除左浮动造成的影响clear:both 清除两边浮动造成的影响注意：在浮动后面的盒子上设置清除样式（即那个受影响就在谁上面设置）2、overflow 超出部分如何处理overflow:hidden;超出部分隐藏overflow:scroll超出部分出现滚动条overflow-x:横轴超出部分...
clear
cxzhq2002的杂记
03-08 518
aaaaaaaaaaaaaaaaaaaaaaaa11111111111111111111111111111111111111111该属性的值指出了其本身旁边不允许有浮动对象==========================clear版本：CSS1　 兼容性：IE4+ NS4+　继承性：无语法：clear : none | left |right | both 参数：none : 　允许两边都可以有浮动对象both : 　不允许有浮动对象left : 　不允许左边有浮动对象right : 　不允许右边有浮动
面试题：清除浮动的三种方式及其原理
热门推荐
惊蛰小鱼的博客
11-05 1万+
清除浮动的三种方式及其原理 浮动元素的特性 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 浮动元素带来的问题 因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。 清除浮动的三种方式 设置float &lt;div style="float: left;"&gt; &lt;div ...
清除浮动（详解）
wwwjjjjj666的博客
12-06 3014
清除浮动（详解）
CSS清除浮动方法
rubylLc的博客
04-29 608
当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。
使用 clear 属性清除浮动的原理？
CjBkl的博客
07-10 3076
使用 clear 属性清除浮动，其语法如下： clear:none|left|right|both 如果单看字面意思，clear:left 应该是“清除左浮动”，clear:right 应该是“清除右浮动”的意思， 实际上，这种解释是有问 题的，因为浮动一直还在，并没有清除。 官方对 clear 属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，我们对元素设 置 clear 属性是为了避免浮动元素 对该元素的影响，而不是清除掉浮动。 还需要注意的一点是 clear 属
css清除浮动 clear float
琉夕东流
03-31 568
clear float 1.为父元素添加overflow:hidden 第一个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden,以强制它包围浮动元素。 eg. It's fun to float. Here is the footer element that runs across the bottom of the page. section{
CSS中clear“清除浮动”的作用原理
weixin_45997184的博客
01-04 1435
CSS中clear“清除浮动”的作用原理 之前看视频中，总听到说clear不是清除浮动，而是消除浮动带来的影响，纠结了一天，没有理解，现在终于能明白这是什么意思了。 下面直接用代码和运行结果说明 HTML代码和CSS代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <link hre
cuda10.2安装pytorch1.8
03-15
### CUDA 10.2环境下正确安装 PyTorch 1.8 的方法 为了在 CUDA 10.2 环境下正确安装 PyTorch 1.8，可以按照以下方式操作： #### 创建 Conda 虚拟环境 首先通过 `conda` 创建一个新的 Python 3.7 虚拟环境并激活它： ```bash conda create --name pytorch_env python=3.7 conda activate pytorch_env ``` 这一步是为了确保有一个干净的环境来安装所需的依赖项[^1]。 #### 安装 PyTorch 和相关库 在虚拟环境中执行以下命令以安装支持 CUDA 10.2 的 PyTorch 1.8 及其配套库： ```bash pip install torch==1.8.0+cu102 torchvision==0.9.0+cu102 torchaudio===0.8.0 -f https://download.pytorch.org/whl/torch_stable.html ``` 上述命令会从官方指定的 URL 中下载适合 CUDA 10.2 的版本[^3]。注意 `-f` 参数的作用是指定额外的索引链接地址，从而获取特定于 CUDA 版本的二进制文件。 #### 验证安装是否成功 完成安装后可以通过运行以下脚本来验证 PyTorch 是否能够正常调用 GPU： ```python import torch print(torch.cuda.is_available()) # 如果返回 True，则说明 GPU 已启用 print(torch.__version__) # 打印当前使用的 PyTorch 版本号 print(torch.version.cuda) # 显示所连接的 CUDA 版本 ``` 如果以上测试均显示预期的结果，则表明安装过程顺利完成[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值