CSS中的浮动与清除浮动

最新推荐文章于 2023-07-20 17:15:10 发布

VIP文章藤椒金汤力

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量537

点赞数

分类专栏： CSS 文章标签： CSS 浮动清除浮动高度坍塌浮动塌陷

本文链接：https://blog.csdn.net/weixin_44196299/article/details/97372144

版权

在CSS中跳出标准文档流的方式有三种：浮动、绝对定位和固定定位，其中绝对定位和固定定位在我的另一篇博客CSS中的定位中有了比较详细的介绍，这篇博客希望能跟大家一起讨论CSS中的浮动。

long long ago

浮动属性最早提出是在CSS1中，其最初的主要目的就是为了允许其他内容（如文本）“围绕”图像，因此浮动属性也只允许作用于图像（有些浏览器还支持表格），后来随着不断发展，浮动属性也允许作用于任何元素，但是文本环绕这一页面样式目前仍然只有利用float属性可以实现，具有唯一性，以下面代码为例：

<!DOCTYPE html>
<html>
<head>
	<title>文本环绕</title>
	<meta charset="UTF-8"/>
	<style type="text/css">
		#text1 {
			float: left;
			top: 0;
			left: 0;
			width: 200px;
			height: 200px;
			border: 2px solid red;
		}
		#text2 {
			width: 400px;
			height: 400px;
			border: 2px dashed green;
		}
	</style>
</head>
<body>
	<div id="text1">A</div>
	<div id="text2">B：我们发现元素A和元素B有一部分重叠，但是文本并没有被元素A所覆盖，而是环绕在
	元素A的周围，这恰是浮动特性提出最初的目的；同时我们从这个图中不难看出，首先浮动脱离了标准文档
	流，所以元素A和元素B有一部分重叠，但是浮动依然会影响标准文档流的布局，具体表现为虽然元素A和
	元素B有一部分重叠但是元素B的文本完全绕开了元素A</div>
</body>
</html>

页面效果：
在这里插入图片描述
如图中所述：我们发现浮动虽然脱离了标准文档流，但是仍然会对标准文档流中的内存空间产生影响，这也是浮动与绝对定位之间的一个重要区别，我们下面尝试用绝对定位来实现文本环绕效果，你将会清晰看到两者之间的区别。
示例：

<style type="text/css">
	#text1 {
		position: absolute;
		top: 0;
  		left: 0;
   		width: 200px;
   		height: 200px;
 		border: 2px solid red;
  	}
  	#text2 {
  		width: 400px;
   		height: 400px;
   		border: 2px dashed green;
	}
</style>

页面结果：
在这里插入图片描述
从两图对比中我们可以发现虽然浮动和绝对定位都可以脱离标准文档流，但是绝对定位是将元素彻底从标准文档流中删除，元素在标准文档流中不占据内存空间，因此更不会对其他元素产生影响，而浮动也是脱离标准文档流，元素向左或向右浮动，但是这些已经被从标准文档流中删除的元素依然会对页面布局产生影响，下面让我们一起去探讨浮动的特性及影响。

浮动

首先我们来看CSS中对于浮动的定义：
　使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。　
更为通俗来说也就是CSS浮动的两大原则：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框的排列可以认为浮动框不存在一样。

在CSS中，我们float属性实现元素框的浮动，可选值有如下三种

left：表示元素框向左浮动
right：表示元素框向右浮动
none：默认值，表示元素框不浮动，按照标准流排列

那么float属性又有什么特性呢？
1、文字环绕
这一功能也是float最初的设计目的，CSS在不断地发展过程中对于float属性一直“不忘初心”，甚至还更加完善，使其能够支持除图像以外的其他元素，关于文字环绕在本文前半部分已经有了详细介绍，此处不再赘述。

2、行级元素横排显示（感觉这一点在实际项目中应该是运用最多的）
示例：
左浮动：

<body>
	<div id="first">first</div>
	<div id="second">second</div>
	<div id="third">third</div>
</body>

<style>
	#first {
		float: left;
		background-color: red;
		width: 50px;
		height: 50px;
	}
	#second {
		float: left;
		background-color: blue;
		width: 50px;
		height: 50px;
	}
	#third {
		float: left;
		background-color: yellow;
		width: 50px;
		height: 50px;
	}
</style>

页面效果：
在这里插入图片描述
右浮动：
示例：

<style>
	#first {
  		float: right;
 		background-color: red;
  		width: 50px;
  		height: 50px;
 	}
	#second {
 		float: right;
  		background-color: blue;
  		width: 50px;
  		height: 50px;
 	}
 	#third {
  		float: right;
  		background-colo

最低0.47元/天解锁文章

藤椒金汤力

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS中的浮动与清除浮动

在CSS中跳出标准文档流的方式有三种：浮动、绝对定位和固定定位，其中绝对定位和固定定位在我的另一篇博客CSS中的定位中有了比较详细的介绍，这篇博客希望能跟大家一起讨论CSS中的浮动。浮动属性最早提出是在CSS1中，其最初的主要目的就是为了允许其他内容（如文本）“围绕”图像，因此浮动属性也只允许作用于图像（有些浏览器还支持表格），后来随着不断发展，浮动属性也允许作用于任何元素，但是文本环绕这一页面...
复制链接

扫一扫