前言
在网页布局中，很多布局效果标准流（文档流）没有办法完成，此时可以利用浮动完成布局，浮动可以改变元素标签默认的排列方式，可以让多个块级元素一行内排列显示。
一、浮动
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
二、浮动特性
- 浮动的元素会脱离标准流（脱标）。
- 浮动的元素会一行内显示并且元素顶部对齐。
- 浮动的元素会具有行内块元素的特性。
2.1 脱标
- 脱离标准流的控制移动到指定位置。
- 浮动的盒子不再保留原先的位置。
示例代码：
<style>
.box1 { width: 200px; height: 200px; background-color: red; }
.box2 { width: 200px; height: 200px; background-color: blue; }
</style>
<body>
<!--浮动的盒子会跑到标准流盒子的顶部去-->
<!-- 设置了浮动的元素，不占位置，脱标-->
<div class="box1"> 浮动的盒子</div>
<div class="box2"> 标准流盒子</div>
</body>
2.2 设置浮动的元素，拥有行内块元素相似的特性
- 如果行内元素添加了浮动后，则不需要转换块级/行内块元素就可以直接给高度和宽度。
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
代码如下（示例）：
<style>
span { float: left; width: 200px; height: 100px; background-color: red; }
</style>
<body>
<!--此时span标签可以显示出来并且在一行显示-->
<span></span>
<span></span>
</body>
三、约束浮动元素位置
为了约束浮动元素位置，网页布局一般采取：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
四、浮动的注意点
- 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动 排列左右位置。 - 一个元素浮动了，理论上其余的兄弟元素也要浮动。
浮动的盒子指挥影响浮动盒子后面的标准流不会影响前面的标准流。
五、清除浮动
5.1 为什么要清除浮动
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
- 父级没高度
- 子盒子浮动了
- 影响下面布局
5.2 清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响。
- 如果父盒子本身有高度，则不需要清除浮动。
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流。
5.3 清除浮动的方法
额外标签法（隔墙法，W3C推荐）
额外标签法会在浮动元素末尾添加一个空的标签。
<div style= "clear.both"> </div>或</br>等
- 添加许多无意义的标签，结构化较差
- 新的空标签必须使块级元素
父级添加overflow属性。
给父级添加overflow属性，将其属性值设置位hidden（无法显示溢出的部分）、auto或scroll。
父级添加 :after 伪元素。
没有增加额外标签结构更简单，需要照顾低版本浏览器。
代码如下（示例）：
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 专有*/
.clearfix {
*zoom: 1;
}
</style>
父级添加双伪元素（闭合浮动）。
同第四种给父元素添加
代码如下（示例）：
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6、7 专有*/
.clearfix {
*zoom: 1;
}
</style>
浮动在css布局中有着举足轻重得作用，其中浮动中的注意点以及清除浮动理解起来不太容易，在使用中多加练习。
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
