为什么需要浮动？

因为很多的布局效果，标准六没办法完成，此时就需要浮动来完成布局。

因为浮动可以改变元素标签的默认排列方式。比如浮动可以让多个块级元素在一行内排列显示。

会使元素向左或向右移动，其周围的元素也会重新排列。

浮动演示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

代码演示浮动效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.thumbnail 
{
	/*给thumbnail类添加浮动*/
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
	<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
	<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
	<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
</body>
</html>

结果：

浮动特性

浮动元素会脱离标准流的控制（浮），移动到自动位置（动）
脱标：浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性
1. 如果块级盒子没有设置宽度，这默认宽度和父级一样宽。添加浮动之后，其大小根据内容来决定
2. 浮动的盒子中间是没有缝隙的，是紧挨在一起的

浮动布局注意点

浮动和标准流的父盒子搭配：

先用标准流的父元素排列上下位置，之后再在每个上下排列的父元素里面采取浮动布局，从而来控制子元素的左右位置。

一个元素浮动，理论上其余的兄弟元素也应该需要浮动：

一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他盒子不浮动的话，可能会引起问题。此外，浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流。

清除浮动

清除浮动语法

选择器{clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

在是实际开发中，多使用clear: both;

清除浮动方法

额外标签法，也称为隔墙法，是W3C推荐的做法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

额外标签法（隔墙法）清除浮动

额外标签法：会在浮动元素末尾添加一个空标签。

例如：（新的空标签必须是块级元素）

优点：简单。

缺点：添加许多无意义的标签，结构化较差

父级添加overflow清除浮动

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

:after伪元素法

:after方式是额外标签法的升级版，也是给父元素添加

代码如下：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /*IE6、7专有*/
    *zoom: 1;
}

双伪元素清除浮动

也是给父元素添加，代码简介，小米，腾讯等网站都是使用此方法。代码如下：

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

H5C3基础学习总结之浮动