关于float的自动换行问题

最新推荐文章于 2025-05-27 03:15:00 发布

cyc_42

最新推荐文章于 2025-05-27 03:15:00 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： float自动换行

本文链接：https://blog.youkuaiyun.com/cyc_42/article/details/75069055

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS中float属性的应用技巧，包括如何使元素自动换行及与未定义浮动属性的块元素的交互方式。此外，还讨论了float属性与其他样式属性如margin的优先级问题及其可能产生的影响。

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

首先设置的几个float属性遇到超过父容器的情况下会自动换行

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<style>
			.box {
				width: 100px;
				height: 700px;
				margin: 0 auto;
				border: 1px solid red;
			}
			.s-left{
				width: 60px;
				height: 100px;
				background-color: #FF0000;
				float: left;
			}
			.s-right
			{
				width: 60px;
				height: 100px;
				background-color: yellow;
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="box">
		<div class="s-left"></div>
		<div class="s-right"></div>
		</div>

	</body>

</html>

其次如果float属性遇到了没有定义float属性的块元素会自动换行

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<style>
			.box {
				width: 700px;
				height: 700px;
				margin: 0 auto;
				border: 1px solid red;
			}
			.s-left{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				float: left;
			}
			.s-center{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			.s-right
			{
				width: 100px;
				height: 100px;
				background-color: yellow;
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="box">
		<div class="s-left"></div>
		<div class="s-center"></div>
		<div class="s-right"></div>
		</div>
	</body>

</html>