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

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

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

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

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

  1. 在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>
    
    1. 在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>
    
    1. 在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>
    
    1. 执行代码后两者效果均如下图:
      在这里插入图片描述

:并且此时进行放缩,两者页面的样式都不会被打乱。
但是将两者父级元素的样式删除之后
在这里插入图片描述
当缩放时,使用positio布局的页面没有出现样式混乱的情况如下图:
在这里插入图片描述
但是使用float布局的页面出现了样式混乱的情况,如下图:
在这里插入图片描述

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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值