浮动元素搭配标准流父盒子

最新推荐文章于 2024-08-28 15:21:08 发布

原创最新推荐文章于 2024-08-28 15:21:08 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #浮动元素 #div #css3

前端专栏收录该内容

23 篇文章

订阅专栏

本文探讨了CSS3中浮动元素（float）与标准流父盒子的交互，通过实例展示了当浮动元素不设置浮动时，如何影响其在页面布局中的位置。内容包括如何调整div元素的浮动属性，以实现不同的排列效果。

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:900px;
				height:450px;
				background-color:red;
				/*若父盒子居中*/
				margin: 0 auto;
			}
			.box1{
				float: left;
				width: 200px;
				height: 450px;
				background-color: yellow;
			}
			.box2{
				float: left;
				width: 700px;
				height: 450px;
				background-color: blue;
			}
		</style>

	</head>
	<body>
		<div class="box">
			<div class="box1">
				盒子1（左）
			</div>
			<div class="box2">
				盒子2（右）
			</div>
		</div>

	</body>
</html>

若第二个盒子没有加浮动，会挨着最左侧开始

			.box2{
				/*float: left;*/
				width: 700px;
				height: 450px;
				background-color: blue;
			}

在这里插入图片描述
若两个都没有加浮动

			.box1{
				/*float: left;*/
				width: 200px;
				height: 450px;
				background-color: yellow;
			}
			.box2{
				/*float: left;*/
				width: 700px;
				height: 450px;
				background-color: blue;
			}

在这里插入图片描述