在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>

执行代码后两者效果均如下图：

注：并且此时进行放缩，两者页面的样式都不会被打乱。
但是将两者父级元素的样式删除之后
在css中position与float对样式影响的不同
当缩放时，使用positio布局的页面没有出现样式混乱的情况如下图：

但是使用float布局的页面出现了样式混乱的情况，如下图：

自我所得：所以在使用float时尽量不让父级元素自动适应大小，可以避免样式发生混乱，虽然使用position会比使用float的代码多一点，但是在布局时建议使用position进行布局更为方便。

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

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

相关推荐