浮动

浮动（float）

元素浮动是指设置了浮动属性的元素会脱离普通流的控制，移动到其父元素中的指定位置的过程
语法格式：
选择器 {float：属性值；}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

如果两个盒子都不加浮动，就是标准流，块级元素自上而下显示

浮动详细内幕特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
（浮体现在漂浮的概念，飘在标准流上面 压住标准流）

浮动首先创建包含块的概念（包裹），就是说，浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围

	 .father {
	 	width: 500px;
	 	height: 300px;
	 	background-color: blue;
	 	border: 5px solid red;
	 	padding: 10px;   /*子盒子的浮动不会压住父盒子的padding和margin值的*/
	 }
	 .son {
	 	width: 200px;
	 	height: 200px;
	 	background-color: purple;
	 	float: right; 
	 }

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个 元素的顶部对齐，如果上一个元素是标准流 ，则A元素的顶部会和上一个元素的底部对齐

	 section {
	 	width: 800px;
	 	height: 500px;
	 	background-color: skyblue;
	 }
	 section div:first-child {
		width: 200px;
		height: 200px;
		background-color: purple;
		float: left;   /*1盒子 浮动*/
	 }
	 section div:last-child {
		width: 249px;
		height: 300px;
		background-color: green;
		float: left;     /*2盒子 也浮动*/
		/*如果1盒子2盒子都浮动，则盒子会顶对齐*/
		/*1盒子不浮动，2盒子浮动，2盒子会跑到下一行*/
	 }

	<section>
		<div>1</div>
		<div>2</div>
	</section>

盒子顶对齐如下：

一个父盒子里面的子盒子，如果其中一个子级有浮动，则其他子级都需要浮动，这样才能一行对齐显示

元素添加浮动后，元素会具有行内快元素的特性，元素的大小完全取决于定义的大小或者默认的内容多少

	 div {
		height: 200px;
		background-color: blue;
		float: left; /* 块级元素添加浮动之后，具有行内快的特性    前提别给宽*/
	 }
	 span {
	 	background-color: purple;
	 	height: 100px;
		float: left;   /*行内元素添加浮动之后也具有行内快特性   前提别给宽*/
	 }
	 /*行内块，可以一行放多个，有宽度和高度，盒子的大小是根据内容决定的*/

浮动的目的是让多个块级元素在同一行上