关于CSS中浮动的知识点、清除浮动方法及几道面试题总结

最新推荐文章于 2025-05-12 14:48:48 发布

Silence-Lee

最新推荐文章于 2025-05-12 14:48:48 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS中浮动浮动面试题 float 定位和float 清除浮动

本文链接：https://blog.youkuaiyun.com/chenxi_li/article/details/95192904

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文围绕CSS中浮动展开，介绍了float参数值及浮动的四个性质，对比了浮动与定位。阐述了清除浮动的原因及多种方法，如给父级元素加高度、添加空div、定义overflow等。还给出了几道浮动相关的面试题及答案，帮助理解浮动布局。

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

一、知识点

float参数值：

none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

float只针对html标签设置靠左靠右浮动样式，要与文字内容靠左( text-align:left)靠右( text-align:right)样式区别开。

注意浮动的四个性质：

浮动元素脱标，能设置宽高、能做并排；
浮动元素互相贴靠，若有足够的空隙会贴最近的元素上面
浮动元素有字围效果，浮动元素能挡住盒子，但挡不住盒子里面的文字
浮动元素有收缩效果，一个浮动的元素若没有设置宽，则会自动收缩为文字的宽度（类似行内元素的性质）

1、字围效果，及float与定位比较，上图说明
在这里插入图片描述

结论：

元素同时设置了浮动和绝对定位，则浮动是没有效果；
定位了的元素永远能压住没有定位的元素，即上面的解释：绝对定位能压住浮动的元素

在这里插入图片描述

注意： 如果元素同时设置了浮动和绝对定位，则浮动是没有效果
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		.big-box{
			width: 600px;
			height: 600px;
			background-color:pink;
			position: relative;
		}
		.sm-box{
			width: 100px;
			height: 100px;
		}
		.box1{
			float: left;
			position: absolute;
			background-color: green;
		}
		.box2{
			background-color: yellow;
			width: 150px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div class='big-box'>
		<!-- <p>1、2两个div盒子都没有浮动，占了两行，各占一行。</p> -->
		<!-- <p>1浮动，则2号盒子就是标准流中的第一个盒子，会跑到1号盒子下面；虽然1号能挡住2号盒子，但挡不住2号盒子里面的文字</p> -->
		<!-- <p>接上图，若2号盒子比1号大，则字围效果如下：</p> -->
		<p>若对1号盒子再设置绝对定位，则无字围效果(字都被压在下面)：</p>
		<div class='box1 sm-box'>我是1号盒子</div>
		<div class='box2 sm-box'>我是2号盒子</div>
	</div>
</body>
</html>

二、清除浮动方法

原因：使用了float 浮动属性，会导致父级对象盒子不能被撑开；由于父级元素没有被撑开，则父级元素设置的背景颜色、图片或边框样式或margin padding等都无法正确显示。
如下，父级盒子边框为红色实线2px，且背景色为pink，里面有两个子盒子分别进行左浮动和右浮动，由于浮动不能撑起父级元素的高度因此父盒子不能正确显示：

<body>
	<div class='big-box'>
		<div class='box1 sm-box'>我是left盒子</div>
		<div class='box2 sm-box'>我是right盒子</div>
	</div>
</body>

清除浮动方法：

给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
给父级div定义伪类：after和zoom（推荐使用）
/*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父级元素添加clearfloat类名即可
给父级元素添加overflow:auto（缺点：内部宽高超过父级div时，会出现滚动条）
给父级元素添加浮动（缺点：会产生新的浮动问题）
给父级元素添加display:table;
其中5、6、7都不推荐使用，了解即可

具体代码如下：

更多的尝试：

三、面试题

1、几个大盒子浮动，大盒子下面有多个子盒子，问子盒子是否浮动。答：不浮动，所有关于盒子的、定位的、布局的属性都不能继承。
在这里插入图片描述
2、有1，2，3，4，5五个盒子，第一个盒子不浮动，其余盒子都浮动，问此时页面是怎样的布局？
答：第一个盒子独占一行，下面四个盒子若宽度足够占一行。浮动的盒子不影响上面的标准流。

3、1，2，3，4，5，6六个盒子，只有3盒子不浮动，其余盒子都浮动，问此时页面是怎样的布局？
答：1、2浮动占一行，因为浮动脱标，不占位置，而3号盒子没有浮动，是标准流中的一员，所以3号盒子跑到了标准流中的对应位置，即3号盒子在1号盒子下面；4、5、6浮动占一行，不影响3号盒子的布局（3要独占一行），在3号盒子下面，如下图所示
4号盒子之所以有3号盒子中的内容333333，是因为有字围效果（浮动元素能挡住盒子，但挡不住盒子里面的文字
）
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		.ab{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
			border:1px solid black;
		}
		.big-box{
			width: 600px;
			height: 600px;
			background-color:pink;
			float: left;
		}
		.sm-box{
			width: 100px;
			height: 100px;
			background-color: yellow;
			border:1px solid black;
			float: left;
		}
		.box3{
			float: none;
			background-color: green;

		}
	</style>
</head>
<body>
	<div class="ab">绿色盒子左浮动</div>
	<div class='big-box'>
		<!-- <p>粉色大盒子左浮动，能和绿色盒子并排，但不影响里面盒子的布局，盒子里面还是标准流</p> -->
		<!-- <p>1，2，3，4，5五个盒子，只有1盒子不浮动，其余盒子都浮动</p> -->
		<p>1，2，3，4，5，6六个盒子，只有3盒子不浮动，其余盒子都浮动。结果是1、2浮动占一行，因为浮动脱标，
		不占位置，而3号盒子没有浮动，是标准流中的一员，所以3号盒子跑到了标准流中的对应位置，
		即3号盒子在1号盒子下面；4、5、6浮动占一行，不影响3号盒子的布局
		（3要独占一行），在3号盒子下面</p>
		<div class='box1 sm-box'>1</div>
		<div class='box2 sm-box'>2</div>
		<div class='box3 sm-box'>333333333</div>
		<div class='box4 sm-box'>4</div>
		<div class='box5 sm-box'>5</div>
		<div class='box6 sm-box'>6</div>
	</div>
</body>
</html>