为了让多个块级元素显示在一行。 块级元素一行只显示一个，行内元素一行显示多个，这种正常的显示方式称为“标准流”。 所以浮动是脱标的。
但浮动也有几条性质
浮动在父级元素里面 不会超过内边距和边框的范围（父级元素设置了高度）如果子盒子有一个浮动了，其余的子盒子都应浮动，否则由于浮动的盒子不占位置会影响其他盒子位置有默认的隐式转换 块级元素转换为行内块元素为了解决父级元素（由于内容高度不确定，未设置高度）由于子集浮动引起的内部高度为0的问题。
案例：想要构建如下布局 随便写的颜色 不要嫌丑：）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid blue; width: 300px; } .big { width: 100px; height: 100px; background-color: red; float: left; } .small { width: 100px; height: 150px; background-color: purple; float: right; } .footer { width: 300px; height: 30px; background-color: #ccc; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>但给红色和紫色盒子加入float后，由于未给蓝色框盒子设置高度，高度为零。
解决方法：
额外标签法父级添加overflow属性使用after伪元素使用before和after双伪元素在最后一个浮动标签后添加属性为clear: both | left | right;的标签（一般写both）。
.clear { clear: both; } <div class="big"></div> <div class="small"></div> <div class="clear"></div>出发BFC方式
.father { border: 1px solid blue; width: 300px; overflow: hidden; /*消除该标签子级浮动*/ }添加clearfix类给父级元素
/*清除浮动*/ .clearfix:after { /*正常浏览器 清除浮动*/ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*zoom 1 就是ie6清除浮动方式 * 代表ie7以下版本所识别*/ } <div class="father clearfix"> /*多标签类*/