为什么需要浮动？
因为很多的布局效果，标准六没办法完成，此时就需要浮动来完成布局。
因为浮动可以改变元素标签的默认排列方式。比如浮动可以让多个块级元素在一行内排列显示。
会使元素向左或向右移动，其周围的元素也会重新排列。
浮动演示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
代码演示浮动效果：
<!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>结果：
浮动特性
- 浮动元素会脱离标准流的控制（浮），移动到自动位置（动）
- 脱标：浮动的盒子不再保留原先的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
- 如果块级盒子没有设置宽度，这默认宽度和父级一样宽。添加浮动之后，其大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的
浮动布局注意点
- 浮动和标准流的父盒子搭配：
先用标准流的父元素排列上下位置，之后再在每个上下排列的父元素里面采取浮动布局，从而来控制子元素的左右位置。
- 一个元素浮动，理论上其余的兄弟元素也应该需要浮动：
一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他盒子不浮动的话，可能会引起问题。此外，浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流。
清除浮动
清除浮动语法
选择器{clear: 属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
在是实际开发中，多使用clear: both;
清除浮动方法
- 额外标签法，也称为隔墙法，是W3C推荐的做法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
额外标签法（隔墙法）清除浮动
额外标签法：会在浮动元素末尾添加一个空标签。
例如：（新的空标签必须是块级元素）
<div style=" clear: both"> </div>
优点：简单。
缺点：添加许多无意义的标签，结构化较差
父级添加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;
}
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
