前端学习之浮动初识

首先了解css定位机制：

1. 普通流/标准流（normal flow）
   网页内标签元素正常从上到下，从左到右的排序的意思。比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通布局。 规规矩矩，一般不会出现意外
2. 浮动（float）
   浮动最早是用来控制图片的，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列，因此我们就慢慢的偏离主题，用浮动的特性来布局了。
3. 定位（待续）

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下:

选择器{float:属性值;}

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

无浮动状态下的两个div:

<div class="up"></div>
<div class="down"></div>

.up{
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	.down{
		width: 200px;
		height: 200px;
		background-color: yellow;
	}

浮动状态下的两个div

div{
		float: left;
	}

为什么要用浮动？

浮动可以让多个div在一行内显示

	<div class="left one"></div>
	<div class="left two"></div>
	<div class="left three"></div>
	<div class="right"></div>
	<style>
	.left{
		width:100px;
		height: 100px;
		float: left;
	}
	.one{
		background-color: red;
	}
	.two{
		background-color: green;
	}
	.three{
		background-color: blue;
	}
	.right{
		width:100px;
		height: 100px;
		background-color: pink;
		float: right;
	}
	</style>

浮动的内幕特性

• 浮动脱离标准流（脱标），不占位置，会影响标准流。
• 浮动只有左右浮动
• 浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

• 这是比较常见的一种排列方式，如果上面两个div浮动，不占位置，那么下面的蓝色盒子必然会顶上去，如果要使蓝色排在第二行，就得在上面的两个div外层包一层div，设定一个高度。

  <!-- 第一部分两个块级元素浮动，底下跟着一个div ，那么第一部分需要一个div包裹 -->
    <div class="father">
       <div class="red"></div>
	   <div class="yellow"></div>
    </div>
	<div class="blue"></div>
	<style>
	 .father{
    	height: 220px;
    }
    .red, .yellow{
    	width:200px;
    	height:200px;
    	float: left;
    }
    .red{
    	background-color: red;
    }
    .yellow{
    	background-color: yellow;
    }
    .blue{
    	width:400px;
    	height: 200px;
    	background-color: blue;
    }
    </style>

• 子元素浮动不会超过父级元素的内边距的范围

<div class="father">
		<div class="son"></div>
</div>
<style>
 .father{
    	width: 600px;
    	height: 600px;
    	background-color: pink;
    	padding:50px;
    }
    .son{
    	width:200px;
    	height:200px;
    	background-color: yellow;
    	float: right;
    }
	</style>

• 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，浮动A元素的顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。即一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对齐显示。

• 上面两张图表明浮动具有隐藏模式转换即元素添加浮动后，元素会具有行内块元素的特性。元素的大小取决于自定义的大小或者默认的内容多少。

     <div>这是div的内容</div>
     <span>这是span的内容</span>
     <style>
      div{
     	height: 100px;
     	background-color: pink;
     	float: left;
          } 
      span{
     	width: 100px;
     	height: 100px;
     	background-color: skyblue;
     	float: left;
          }
	</style>

总结：

• 浮动的目的就是让多个块级元素同一行上显示。
• 最核心的关键点就是 怎么排列的，是否占有位置。
• 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子的上面。
• 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子；
• 特别注意，首先浮动的盒子需要和标准流的父级搭配使用；其次特别注意的是浮动可以使元素显示模式体现为行内块特性