CSS——浮动布局(补充)

CSS——浮动布局(补充)

上次我们说到浮动布局和定位布局;
但浮动当时并没有讲的太清楚,所以今天来继续说说浮动。

首先还是将最基本的盒子搞定;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
     #wrapper{
     	width: 200px;
     	height:200px;
     	margin:0 auto;
     	background-color: pink;
     }
     #content{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;

     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     }
    

	</style>
</head>
<body>
	<div id="wrapper">
		<div id="content">c</div>
		<div id="content1">1</div>
		<div id="content2">2</div>
	</div>
</body>
</html>

在这里插入图片描述
我们首先给元素依次加上左浮效果;

 #contentc{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	float:left;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;
        float:left;
     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     	float:left;
     }

在这里插入图片描述
图片依次排成一排,但我们只给第一个盒子加上左浮由会出现什么情况呢?

  #contentc{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	float:left;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;
   
     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     	     }

我们将1和2盒子的左浮效果去掉;
在这里插入图片描述
红色盒子明显消失了,仔细一看我们会发现蓝色盒子的左上方的数字1和2重叠在一起了。
那么为什么会出现这种情况呢?

所谓浮动仅从字面理解它一定和漂浮有关,而这种现象便是c盒子上浮导致1盒子跑去占据了c盒子原本的第一行,同理2盒子也是一样,但1盒子中的内容并没有随着盒子一起运动。

(侧视图)
在这里插入图片描述
这样大家可能更好理解。

我们给盒子2加上右浮;
在这里插入图片描述
很明显盒子1确实在c盒子的下面,假如盒子1没有在c盒子下面,那么2盒子右浮应该并排在c的最有端,即图上画出来的位置。在这里插入图片描述
但是2并没在其位置,所以证明了盒子1在c下面并单独占一行(块状元素的特性);
所以大家在用浮动布局时一定要注意一些细节。
谢谢大家——Miziguo >_<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值