在网页布局中，很多布局效果标准流（文档流）没有办法完成，此时可以利用浮动完成布局，浮动可以改变元素标签默认的排列方式，可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
示例代码：
<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>代码如下（示例）：
<style> span { float: left; width: 200px; height: 100px; background-color: red; } </style> <body> <!--此时span标签可以显示出来并且在一行显示--> <span></span> <span></span> </body>为了约束浮动元素位置，网页布局一般采取：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
父级没高度子盒子浮动了影响下面布局额外标签法会在浮动元素末尾添加一个空的标签。
<div style= "clear.both"> </div>或</br>等 添加许多无意义的标签，结构化较差新的空标签必须使块级元素给父级添加overflow属性，将其属性值设置位hidden（无法显示溢出的部分）、auto或scroll。
没有增加额外标签结构更简单，需要照顾低版本浏览器。
代码如下（示例）：
<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>