CSS 浮动(float)

最新推荐文章于 2025-09-09 00:08:47 发布

转载最新推荐文章于 2025-09-09 00:08:47 发布 · 616 阅读

收录于

web前端

博客介绍了网页布局中普通流和浮动的概念。普通流是标签元素正常排列顺序，块级元素独占一行，行内元素依次排列。浮动最早用于实现文字环绕图片效果，后来用于布局。设置浮动的元素会脱离标准流，通过float属性定义，具有浮、漏、特的特性。

普通流(normal flow)

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
在这里插入图片描述

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经我们真正意义上的网页布局，具体CSS3我们会详细解释）
在这里插入图片描述

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字环绕效果</title>
	<style>
	div {
		width: 500px;
		height: 500px;
		border: 1px solid hotpink;
		margin: 0 auto ;  /* 让盒子居中 */
	}
	img {
		float: right; /* 文字环绕 */
	}
	</style>
</head>
<body>
	<div>
	1981年出演电影处女作《彩云曲》 [2]  
	<img src="../images/img(1).jpg" height="220px" width="171px" alt="">
1985年发行首张个人专辑《只知道此刻爱你》 [15]  。1990年凭借专辑《可不可以》在歌坛获得关注 [16]  。1994年获得十大劲歌金曲最受欢迎男歌星奖。1995年在央视春晚上演唱歌曲《忘情水》 [17]  。2000年被《吉尼斯世界纪录大全》评为“获奖最多的香港男歌手” [18]  。2004年第六次获得十大劲歌金曲最受欢迎男歌星奖。2016年参与填词的歌曲《原谅我》正式发行 [19]  。
1994年创立刘德华慈善基金会 [20]  。2000年被评为世界十大杰出青年 [21]  。2005年发起亚洲新星导计划 [22]  。2008年被委任为香港非官守太平绅士 [23]  。2016年连任中国残疾人福利基金会副理事长。 [21] 
	</div>
</body>
</html>

浮动详细内幕特性

浮动首先创建包含块的概念（包裹）。
就是说， 浮动的元素总是找理它最近的父级元素对齐。
但是不会超出内边距的范围。

在这里插入图片描述

浮动的元素排列位置，跟上一个元素（块级）有关系。
如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

在这里插入图片描述

由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，
则其他子级都需要浮动。这样才能一行对齐显示。

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少
浮动根据元素书写的位置来显示相应的浮动。

总结：浮动 —> 浮漏特

浮动的目的就是为了让多个块级元素同一行上显示

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
特：特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>体会浮动</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: purple;
		/*转换为行内块元素 就可以放一行上 有宽度高度 但是元素之间有空隙*/
		/* display: inline-block; */
		float: left; /* 左侧浮动 */
	}
	div:nth-child(2) {
		background-color: skyblue;
	}
	div:last-child {
		background-color: orange;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动详解</title>
	<style>
	div:first-child {
		width: 200px;
		height: 200px;
		background-color: skyblue;
		float: left;   /* left 默认值 */
	}
	div:last-child {
		width: 150px;
		height: 300px;
		background-color: purple;
	}

	</style>
</head>
<body>
	<div>11</div>
	<div>12</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动特性对齐父盒子</title>
	<style>
	.father {
		width: 500px;
		height: 300px;
		background-color: gray;
		border: 2px solid red;
		padding: 10px;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		float: right;
	}

	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动特性</title>
	<style>
	section {
		width: 600px;
		height: 500px;
		background-color: gray;
	}
	section div:first-child {
		width: 260px;
		height: 200px;
		background-color: purple;
		float: left;   /*只第一个加浮动 第二个在下面 */
	}
	section div:nth-child(2) {
		width: 240px;
		height: 300px;
		background-color: skyblue;
		/* 
		   1.都加浮动 顶对齐  
		   2.只第二个加浮动 第二个顶和第一个底部对齐 
		*/
		float: left; 
	}
	</style>
</head>
<body>
   <section>
       <div>优秀</div>
       <div>完美</div>
   </section>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动改变元素模式</title>
	<style>
	div {
		height: 200px;
		background-color: gray;
		float: left; /* 块级元素加浮动后 具有行内块的特性 */
	}

	/* 行内块 可以一行放多个 有宽度和高度 盒子的大小是由内容决定的 */
	span {
		background-color: purple;
		height: 100px;
		float: left;  
	}
	</style>
</head>
<body>
	<div>星际时代</div>
	<div>星际时代</div>
	<span>帝国崛起</span>
	<span>帝国崛起</span>

</body>
</html>

在这里插入图片描述