css(六)之浮动

浮动

网页布局的3种方式：

• 标准流
• 浮动
• 定位

浮动的必要性

1. 如何让块级div水平排列成一行？

虽然可以将div转化成行内块元素，但是块与块之间会留下空隙，很难控制。

2. 如何实现盒子的左右对齐？

使用标准流是很难完成的。

总结：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动概念

float用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。

选择器 {float:属性值}

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

浮动的特性

1. 浮动元素会脱标。
   现在有2个div
   
   这个是标准流，如果给第一个盒子加了float属性，盒子就会飞起来，就会变成如下模样。
   

2. 浮动元素会一行内显示并且顶部对齐。
   如果div1和div2都设置了左浮动，会变成如下模样：
   

3. 浮动元素会具有行内块元素的特性。

4. 浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

5. 浮动不会压住标准流里面的文字。

清除浮动

之前例子中父盒子的高度是固定的，但是在网页布局中比如一篇文章长短是不同的，不能把盒子定死。但是盒子浮动不占位置，最后父级高度为0时，就会影响标准流的盒子。

在清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级就会有高度，就不会影响下面的标准流了。

语法：

clear:both;

额外标签法

在浮动元素末尾添加一个空标签:

<div style="clear:both"></div>

优点：
通俗易懂。
缺点：
结构化比较差。

给父亲添加overflow

给浮动元素的父元素添加以下属性：

overflow:hidden;

优点：
代码简洁。
缺点：
无法显示溢出部分。

after伪元素

.clearfix:after{
	content:"";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

然后给父元素添加clearfix类属性。

双伪元素

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}

然后给父元素添加clearfix类属性。