CSS 之float clear

最新推荐文章于 2024-07-24 21:03:00 发布
置顶 最新推荐文章于 2024-07-24 21:03:00 发布
阅读量3.9k 收藏 3
点赞数 1
分类专栏： html css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujan511536/article/details/50086275
版权
html 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

当一个元素用上clear时，如果clear值为left则表示这个元素的左边不能有float元素;如果为right则表示这个元素的右边不能有float元素；如果为both则左右两边都不能有float元素。

例子：

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div#div1
	{
		width: 80px;
		height: 80px;
		background-color: yellow;
		float: left;
	}
	div#div2
	{
		width: 80px;
		height: 80px;
		background-color: green;
		float:left;
	}
	</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

这时div2没有用clear，所以div2会跟在div1的后面。

如果div2用上clear:left，由于这时div2左边不能有float元素，而div1又是float元素，所以div2只能移到下一行：



记住，clear只能对当前元素（使用它的元素）起作用，也就是只会影响当前元素的位置，不会影响其他元素的位置。

比如：

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div#div1
	{
		width: 80px;
		height: 80px;
		background-color: yellow;
		float: left;
	}
	div#div2
	{
		width: 80px;
		height: 80px;
		background-color: green;
		float:left;
	}
	</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>


这时两个div都是float:left，所以div2会跟在div1的右边。如果我们想让div2另起一行，有些人可能会给div1加上clear:right，表示不允许div1右边不能有float元素，但这样是行不通的。因为我们现在是给div1加clear，所以只能改变div1的位置，而我们现在想改变的是div2的位置。

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div#div1
	{
		width: 80px;
		height: 80px;
		background-color: yellow;
		float: left;
		clear:right;
	}
	div#div2
	{
		width: 80px;
		height: 80px;
		background-color: green;
		float:left;
	}
	</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

所以正确的做法是给div2加上clear:left：

<html>
<head>
	<title>float 4</title>
	<style type="text/css">
	div#div1
	{
		width: 80px;
		height: 80px;
		background-color: yellow;
		float: left;
	}
	div#div2
	{
		width: 80px;
		height: 80px;
		background-color: green;
		float:left;
		clear: left;
	}
	</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>


接着看个更复杂的例子。:

<!DOCTYPE html>
<html>
<head>
<style>


#div1,#div2, #div3, #div4
{
	width:80px;
	height:80px;
}

#div1{
	border:1px solid red;
	background:red;
	float:left;
}

#div2
{
	border:1px solid green;
	background:green;
	float:left;
}

#div3
{
	border:1px solid blue;
	background:blue;
	float:left;
}

#div4
{
	border:1px solid yellow;
	background:yellow;
}
</style>
</head>
<body>
<div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
</body>
</html>

这时候div4的位置实际上在div1那里，只不过被div1覆盖了。

如果在div2和div3之间加上clearfix：

<!DOCTYPE html>
<html>
<head>
<style>
#div1,#div2, #div3, #div4
{
	width:80px;
	height:80px;
}

#div1{
	border:1px solid red;
	background:red;
	float:left;
}

#div2
{
	border:1px solid green;
	background:green;
	float:left;
}

#div3
{
	border:1px solid blue;
	background:blue;
	float:left;
}

#div4
{
	border:1px solid yellow;
	background:yellow;
}
.clearfix
{
	clear: both;
}
</style>
</head>
<body>
<div>
    <div id="div1"></div>
    <div id="div2"></div>
   <div class="clearfix">sdfewr</div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
</body>
</html>


按顺序渲染时，由于div1和div2都是float:left，所以它们会在第一行紧挨着。接着到clearfix，由于其有clear:both，所以它左边不能有float元素，所以它会移到下一行。接着是div3，由于div3在clearfix的后面，所以div3不能覆盖clearfix，又由于div是块级元素，所以div3只能在clearfix的下一行。接着是div4，由于div3是float:left，所以div4会被div3覆盖。


如果clearfix也加入float:left的话：

<!DOCTYPE html>
<html>
<head>
<style>
#div1,#div2, #div3, #div4
{
	width:80px;
	height:80px;
}

#div1{
	border:1px solid red;
	background:red;
	float:left;
}

#div2
{
	border:1px solid green;
	background:green;
	float:left;
}

#div3
{
	border:1px solid blue;
	background:blue;
	float:left;
}

#div4
{
	border:1px solid yellow;
	background:yellow;
}
.clearfix
{
	clear: both;
	float: left;
}
</style>
</head>
<body>
<div>
    <div id="div1"></div>
    <div id="div2"></div>
   <div class="clearfix"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
</body>
</html>


这时页面上看上去的效果是一样的，不过这时div4的位置实际上移到了div1的位置上，只不过被div1覆盖了。造成现在与刚才这两种情况的原因是，刚才由于clearfix没有float，所以其实标准流的，所以它后面的非float元素只能跟在它后面。而现在clearfix也加入了float,那么div4前面的所有元素都是float，所以它们都会脱离标准流，所以div4才会被div1覆盖。所以非浮动元素会一直往前走，直到遇到非浮动元素并跟在它后面，同时可能被浮动元素覆盖。



sysu安仔
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css设置float,【CSS】float属性
weixin_29271053的博客
08-03 1379
float浮动属性1、作用:将页面元素浮动起来，使其能够向左或者向右排列2、应用:实现页面中布局的左右排版实现图文环绕的版式效果3、值：4、原理:浮动元素将脱离默认的文档流，漂浮在默认文档流之上浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止普通文档流可以看作是一个X、Y轴的平面流，float浮动流可以看到是一个Z轴上的立体流，Float浮动流离眼睛更...
CSS之float和clear
m0_48796380的博客
03-17 814
文章目录CSS之float和clear一、Float属性高度坍塌解决办法方法一：方法二：方法三：字围现象二、Clear属性 CSS之float和clear 盒子布局是现在较为流行的网页布局方式，最近的几道经典面试题都与float及clear有关。“float是魔鬼，会影响其他相邻元素；但是clear是小白，其智慧影响自身，不会对其他相邻元素造成影响”——某位大牛 一、Float属性 float就是浮动，让元素脱离文档流，让元素漂浮起来，和普通的文档流不在同一个层面上。float是将元素左右移动而不能上下
【CSS】float 浮动 和 clear 清除浮动
qq_45677671的博客
12-30 1001
文章目录1. float （浮动）2. clear（清除浮动）2.1 非浮动元素使用2.2 在浮动元素使用2.3 万能清除浮动法 1. float （浮动） float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 浮动元素会从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。 float 语法： /* 默认为 none 属性值 */ { float : left / right / none / inherit; } 参数说明： -
css样式 float clear 详解
风一样的男人
02-13 2257
转载 CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从最基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。 基础知识 float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。 浮动
float clear的css属性,关于css的float以及clear属性的理解
weixin_35659543的博客
08-04 172
首先是对float属性的定义有一个整体的了解，float的定义是：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。一个元素如果设置了float属性，则会脱离当前的普通流(即文档流)，漂浮在普通流之上，具体漂浮的位置边界，与该元素的包含块以及前一个块级元素的位置有关，fl...
css float 和 clear:both
allensandy的博客
05-20 704
clear:right/left 表示该元素的左边或者右边不允许出现浮动元素。 阅前必看---CSS浮动(float,clear)通俗讲解-参考：https://www.cnblogs.com/zfquan/p/7793945.html 案例1 不clear <!DOCTYPE html> <html lang="en"> <head> &lt...
CSS之float属性详解
good god~的博客
05-10 2443
float官方文档概念 float属性指定一个盒子（元素）是否应该浮动，可以设置浮动方向。 css语法 float：left|right|none|inherit ； 属性值： 值 描述 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动，并会显示在其文本中出现的位置 inherit 规定应该从父元素继承float属性的值 例子(怎样一个浮动法） 简单来说就是让块级元素并排在一行当中显示。 <!DOCTYPE html> <htm
css中float用法
yuqu1028的博客
06-13 3612
设置两个div1，div2相邻盒子左浮动时，div1与div2在同一行，div2在div1的右侧。但当宽度超过一行的限制时，div2会默认转到div1的下一行。 看代码： 效果如图所示： 此时div1靠近右侧边沿，div2跟随在div1后面当div1设置浮动而div2未设置浮动时，div2会有一部分被div1覆盖掉并且div2占据页面左上角，此时div2是处于标准流之中如图所示： 反之当div1未设置浮动div2设置左浮动，即div1处于标准流，则div2将会另起一行紧贴在div1的下面如图所示：
css中float的使用
qq_46025885的博客
08-02 776
float的使用
CSS中float和clear各是什么意思有哪些区别
12-13
float:left; 当前元素向左侧浮动.float:right: 当前元素向右侧浮动. clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.clear:right; 禁止右侧出现浮动元素,如果右侧...
css,float,clear
11-20
我对css几个主要属性的理解，inline,block,float,clear
css 的 float 与clear
04-04
在CSS世界中，`float`和`clear`是两个非常重要的布局属性，它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中，我们将深入探讨`float`和`clear`的概念...
CSS clear属性给float带来哪些影响
09-25
CSS clear属性相信大家都有所耳闻吧，下面举例说明下clear属性到底给float（clear常常和float结合使用）带来哪些影响
CSS：mix-blend-mode属性（设置元素的混合模式）
m0_65029152的博客
07-24 944
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 455
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1255
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
uu0216的博客
07-24 570
这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。
[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数
最新发布
Lovely Ruby 的手账
07-24 304
作用：这个属性是一个非标准的Webkit特定属性，它使得元素使用弹性盒模型（Flexbox的前身）。这允许使用-webkit-line-clamp和-webkit-box-orient属性。示例场景：当你有一个固定宽度的容器，而其中的文本可能包含非常长的单词或URL时，这个属性可以防止文本溢出容器边界。作用：这个属性允许在单词内部进行换行，即使单词很长也不会溢出容器，而是会在必要的地方打断单词以适应容器宽度。示例场景：与-webkit-line-clamp一起使用，确保文本按垂直方向截断。
CSS float与clear：网页布局基石
本文档主要探讨了CSS中的"float"属性和"clear"属性在网页样式设计中的应用，以及HTML与CSS在现代Web设计中的角色。CSS（层叠样式表）在W3C标准中的地位提升，使得Table在布局中的使用逐渐被元素和CSS控制取代。使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值