浮动 float

浮动

浮动（float）是css样式中的定位属性，用于设置标签的浮动布局。

1.浮动的作用

• 让盒子从普通流中脱离出来，可以用于让多个块级盒子一行显示。
• 可以实现盒子的左右对齐。
• 可以用来控制图片，实现文字环绕图片的效果。

2.浮动的语法

selector {
	float: property;
}

selector 是选择器， property 是属性，属性值有 ：

1. none 元素不浮动(默认值)
2. left 元素向左浮动
3. right 元素向右浮动

3.浮动的特性

1. 脱离标准流

• 浮动会让盒子"漂浮"在标准流上面。也就是说，浮动的盒子会遮挡住标准流的盒子，呈现在屏幕上就是标准流盒子被浮动盒子压住。

2. 不占位置

• 浮动后，盒子在标准流中不占位置。也就是说，浮动的盒子会失去在浮动之前盒子在标准流中的占位，原来的占位由浮动元素之后的元素所占。

3.改变display属性

• 元素浮动之后，display 属性会变为 block,本来是块级元素的 display 属性不变，还是为 block。

例子：

• 绿色盒子和span没有浮动
  

• 绿色盒子向左浮动，span标签向右浮动

从上面的例子看出，绿色盒子浮动之后，绿色盒子遮挡住了橙色盒子(脱离标准流)，橙色盒子占住了绿色盒子原来的位置(不占位置)。span元素向右浮动之后display属性由 inline 变为 block。

4. 浮动与父盒子关系以及清除浮动

1. 浮动盒子与父盒子的关系

• 子盒子浮动是参照父盒子对齐的，而不是参照 body 或是 window 对齐的。
• 子盒子不会与父盒子的边框重叠，也不会占据父盒子的内边距。

例子:

• 从上面的例子看到，浮动的盒子没有超过橙色盒子的右边距，浮动的盒子白色边框没有和橙色盒子边框重合。

2. 清除浮动

1. 为什么要清除浮动？

• 父盒子因为一些原因没有给高度，子盒子浮动之后不占标准流，就不能撑开父盒子，导致父盒子后面的元素被浮动的元素遮挡，影响了布局。

2. 清除浮动的方法

1. 用额外标签清除浮动，做法是在浮动的元素末尾(之后)添加一个空标签如:

{ 
<div class="father">
	<div class="son float">我是浮动的子盒子</div>
	<div class="clear"></div> /* 在这里添加清除浮动的标签 */
</div>
}
.float{
	float: left;
}
.clear{
	clear: both;
}

• 此方法添加了无意义的标签，结构比较差，但书写简单。

2. 给父级添加 overflow 的方法，属性为 hidden auto scroll 都可以

<div class="father">
	<div class="son float">我是浮动的子盒子</div>
</div>
}
.father{
	overflow: hidden;
}

• 此方法有个缺点是父盒子里面的内容过多，容易造成不自动换行，因而内容被隐藏，不能显示溢出的元素。

3. 使用 after 伪元素清除浮动，做法是给需要清除浮动的元素添加下面的样式:

 .float:after {  
  content: "";
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}   
 .float {*zoom: 1;}   /* IE6、7 添加 */

• 这样写语义化较好。

4. 使用双伪元素清除浮动

/* clearfix 代表需要清除浮动的元素 */
.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

• 同样语义化比较好