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