在css中position与float对样式影响的不同

最新推荐文章于 2025-06-07 20:47:06 发布

唐鑫tx

最新推荐文章于 2025-06-07 20:47:06 发布

阅读量588

点赞数 4

CC 4.0 BY-SA版权

文章标签：在css中position与float对样式影响的不同

本文链接：https://blog.youkuaiyun.com/weixin_44545501/article/details/86514246

本文对比了CSS中position与float布局方式的差异，通过实例演示了两者在不同情况下的表现，特别是在父级元素尺寸变化时，position布局能更好地保持页面样式稳定。

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

在css中position与float对样式影响的不同

在css中，position和float都是用于布局比较常用的方法，虽然有时效果一样，但是在某种情况下position比float更加好用，实例如下。

在Htlm代码中封装一个大盒子为父级元素，其中放置4个类名不相同的小盒子为子级元素如下

 	<!doctype html>
 	<html>
 	<head>
 	<meta charset="utf-8">
 	<title>float</title>
 	</head>
 	<body>
 		<div class="fuji">
 			<div class="ziji1">
 			</div>
 			<div class="ziji2">
 			</div>
 			<div class="ziji3">
 			</div>
 			<div class="ziji4">
 		</div>
 	</div>
   	</body>
 	</html>

在css中给父级元素和子级元素样式，并使用float布局。

  <style>
  /*  简单初始化Html  */
  *{
   margin: 0px;
   padding: 0px;
  }
  /*  父级元素css样式  */
  .fuji{ 
   width: 800px;
   height: 200px;
  }
  /*  子级元素css样式  */
  .ziji1{
   float: left;
   width: 200px;
   height: 200px;
   background: #aaffff;
  } 
  .ziji2{
   float: left;
   width: 200px;
   height: 200px;
   background: #f00;
  } 
  .ziji3{
   float: left;
   width: 200px;
   height: 200px;
   background: #ff0;
  } 
  .ziji4{
   float: left;
   width: 200px;
   height: 200px;
   background: #fdd;
  } 
 </style>

在css中给父级元素和子级元素样式，并使用position布局。

 <style>
  /*  简单初始化Html  */
  *{
   margin: 0px;
   padding: 0px;
  }
  /*  父级元素css样式  */
  .fuji{ 
   width: 800px;
   height: 200px;
   position: relative;
  }
  /*  子级元素css样式  */
  .ziji1{
   width: 200px;
   height: 200px;
   background: #aaffff;
   position: absolute;
  } 
  .ziji2{
   width: 200px;
   height: 200px;
   background: #f00;
   position: absolute;
   left: 200px;
  } 
  .ziji3{
   width: 200px;
   height: 200px;
   background: #ff0;
   position: absolute;
   left: 400px;
  } 
  .ziji4{
   width: 200px;
   height: 200px;
   background: #fdd;
   position: absolute; 
   left: 600px;
  } 
 </style>