<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 浮动 </title>
<style type="text/css">
.body1{
width:500px;
height:500px;
border:1px solid red;
}
.div-box1{
width:150px;
height:150px;
background-color:pink;
border:1px solid blue;
/*左浮动*/
float:left;
margin-left:5px;
margin-top:5px;
}
.span1{
width:150px;
height:150px;
background-color:silver;
float:left;/*左浮动*/
margin-left:5px;
margin-top:5px;
border:1px solid blue;
}
</style>
</head>
<body >
<div class="body1">
<div class="div-box1">腊月二十八,晴</div>
<div class="div-box1">腊月二十八,晴</div>
<div class="div-box1">腊月二十八,晴</div>
<span class="span1">贰零壹柒</span>
<span class="span1">贰零壹柒</span>
</div>
</body>
</html>
总结:
1.左浮动就是向你指定的方向移动,并且让出空间;
2.如果后面的元素也是移动的,那么后面的元素在碰到前面的浮动的元素或者边框的时候,定位在那里;
3.如果后面的元素没有浮动,则该元素就会在浮动元素的下面;
4.行元素也可以浮动,浮动后具有块元素的特点;
QQ截图20170125113830.png
网友评论