浮动

浮动

浮动的定义

float属性定义元素在哪个方向浮动,任何元素都可以浮动.

浮动的原理

1. 浮动以后使元素脱离了文档流
2. 浮动只有左右浮动,没有上线浮动

元素向左浮动

脱离文档流之后,元素相当于页面上面增加一个浮层来放置内容,此时可以理解为有两层页面,一层是底层的原页面,一层是脱离文档流的上层页面,所以会出现折叠现象

<div class="box"></div>
<div class="container"></div>
.container{
	width:200px;
	height:200px;
	background-color:#81c784;
}
.box{
	width:100px;
	height:100px;
	background-color:#fff176;
	float:left;
}

元素向右浮动

<div class="box"></div>
<div class="container"></div>
.container{
	width:200px;
	height:200px;
	background-color:#81c784;
}
.box{
	width:100px;
	height:100px;
	background-color:#fff176;
	float:right;
}

所有元素向左浮动

当所有元素同时浮动的时候,会变成水平摆放,向左或者向右

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background-color:#fff176;
	float:right;
	margin:0 5px;
}

当容器不足时

当容器不足以横向摆放内容时候,会在下一行摆放

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container{
	width:250px;
	height:300px;
	border:1px solid red;
}
.box{
	width:100px;
	height:100px;
	background-color:#fff176;
	float:right;
	margin:0 5px;
}