首先我们看下没有浮动的样式：
html代码：
<div id="div1">
<div id="blue"></div>
<div id="pink"></div>
</div>css代码：
#div1 {
background:purple;
}
#blue {
width:200px;
height:100px;
background:blue;
}
#pink {
width:250px;
height:150px;
background:pink;
}效果图：
现在我们给左下角的粉色div添加一个向左的浮动（float:left)
现在的#right代码变成了下面这样的。
#pink {
width:250px;
height:150px;
background:pink;
float:left;
}效果图如下：
发现紫色的div全部跑到了粉色的上面，高度和蓝色div一样。
现在再给蓝色div添加一个向左的浮动（float:left）。
#blue {
width:200px;
height:100px;
background:blue;
float:left;
}效果图如下：
发现紫色的div消失了，而粉色的div和蓝色div并排在一起了。
所以说在元素进行了浮动后默认是出现在同一行，而且浮动元素的位置是到父级的边界或者是遇到另外一个浮动元素才会停止。
那么如果不想紫色div消失，那么就需要消除浮动，方法如下：
方法一：给父元素以高度和宽度。
#div1 {
background:purple;
width:500px;
height:250px;
}效果图如下：
方法二：父级元素加上overflow：hidden
如果不想给紫色div固定的宽高，想让它的内容将它撑开。那么我们就可以在父级元素上也就是紫色div的css中加上overflow：hidden。从而让紫色div显示出来了。
#div1 {
background:purple;
overflow:hidden;
}效果图如下：
方法三：给兄弟元素加一个clear：both
html代码：
<div id="div1">
<div id="blue"></div>
<div id="pink"></div>
<div id="div2"></div>
</div>css代码：
#div2 {
clear:both;
}全部代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
background:purple;
}
#blue {
width:200px;
height:100px;
background:blue;
float:left;
}
#pink {
width:250px;
height:150px;
background:pink;
float:left;
}
#div2 {
clear:both;
}
</style>
</head>
<body>
<div id="div1">
<div id="blue"></div>
<div id="pink"></div>
<div id="div2"></div>
</div>
</body>
</html>除了对父级进行改变，我们也可以对子元素的兄弟元素进行改动，从而达到去除浮动的效果。
效果图如下：
方法四：利用伪类去除浮动
html代码:
<div class="div_class">
<div id="blue"></div>
<div id="pink"></div>
</div>css代码：
.div_class {
background:purple;
}
.div_class:after {
content:"";
clear: both;
display: block; <!--可以是block，也可以使用table或者list-item也可以，但是需要去掉项目符号。-->
}全部代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div_class {
background:purple;
}
.div_class:after {
content:"";
clear: both;
display: block; <!--可以是block，也可以使用table或者list-item也可以，但是需要去掉项目符号。-->
}
#blue {
width:200px;
height:100px;
background:blue;
float:left;
}
#pink {
width:250px;
height:150px;
background:pink;
float:left;
}
</style>
</head>
<body>
<div class="div_class">
<div id="blue"></div>
<div id="pink"></div>
</div>
</body>
</html>效果图如下：
