一、浮动流是指半脱离标准流的排版方式（只有left和right）。
1、特点：
（1）不区分三种元素（行内、块级、行内块级）。
（2）浮动的元素不能撑起父元素的高度。
2、浮动元素排序规则：
（1）相同方向上的浮动元素，先浮动的在前面。
（2）不同方向上的浮动，左浮动找左浮动，右浮动找右浮动。
（3）浮动元素浮动之后的位置由浮动元素之前在标准流中的位置决定。
二、清除浮动流。
1、给前面一个父元素设置高度
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
height: 21px;
}
.box1 p{
background-color: pink;
width: 50px;
}
.box2 p{
background-color: blue;
width: 50px;
}
p{
float: left;
}
</style>
</head>
<body>
<div class="box1">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
<div class="box2">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
当第一个div里面的p都浮动完后，因为第一个div有了高度，所以第二个div中的在标准流中排在第二行。
2、给后面的盒子添加clear：both; 使元素不在找它前面的左浮动和右浮动。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1 p{
background-color: pink;
width: 50px;
}
.box2 p{
background-color: blue;
width: 50px;
}
p{
float: left;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
<div class="box2">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
注意点：此元素的margin属性将消失。
3.1、在两个盒子中间添加一个空的div，并为其设置clear属性。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1 p{
background-color: pink;
width: 50px;
}
.box2 p{
background-color: blue;
width: 50px;
}
p{
float: left;
}
.wall{
clear: both;
}
.h20{
height: 20px;
background-color: #000;
}
</style>
</head>
<body>
<div class="box1">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
<div class="wall h20"></div>
<div class="box2">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
注意点：
（1）前一个盒子的margin-bottom属性将消失。
（2）设置两个盒子之间的距离，可以通过设置 .wall的高度来实现。
3.2、将第一个盒子所有元素的最后面放置一个空div。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
background-color: #ccc;
}
.box1 p{
background-color: pink;
width: 50px;
}
.box2 p{
background-color: blue;
width: 50px;
}
p{
float: left;
}
.wall{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<p>文字</p>
<p>文字</p>
<p>文字</p>
<div class="wall h20"></div>
</div>
<div class="box2">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
注意点：
（1）第一个盒子的margin-bottom属性可以使用。
（2）第二个盒子的margin-top可以使用。
（3）第一个盒子的高度会被内容撑起。
4、利用伪元素选择器。
.box1::after{
content: "";
display: block;
visibility: hidden;
clear: both;
}
/* 为了兼容IE6 */
.box1{
*zoom: 1;
}
与3.2原理相同：
内容为空、的块级元素、并隐藏、然后清除左右浮动。
5、给第一个盒子设置overflow: hidden; 与*zoom：1;