浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.float-div div{
width: 100px;
height: 100px;
margin: 20px;
/*文字内容垂直水平居中写法*/
text-align: center;
line-height: 100px;
/**/
background-color:#FFFF99;
/*浮动*/
float: left;
}
.normal-div{
width: 100px;
height: 100px;
line-height: 100px;
/**/
background-color:#CCCCFF;
}
</style>
</head>
<body>
<div class="float-div">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="normal-div">A</div>
</body>
</html>
原版图
1.添加空div标签，并设置样式 clear: both
在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，让父级 div 能自动获 取到高度
缺点：如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .
<div class="float-div">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="clear-both"></div>
<div class="normal-div">A</div>
.clear-both {
clear: both;
}
2.父级标签定义伪类 ::after
.float-div::after {
content: '';
height: 0;
/**/
display: block;
clear: both;
}
3.父级标签增加样式 overflow:hidden
父级 div 定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用.
.float-div {
overflow: hidden;
}
4.父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
优缺点：简单、代码少、容易掌握 ，但 只适合高度固定的布局.
5.父级 div 定义 伪类：after 和 zoom
原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 1 有点类似，zoom(IE 转有属性)可解决 ie6，ie7 浮动问题 .
推荐使用，建议定义公共类，以减少 CSS 代码。
.float-div:after{
/*//设置内容为空
//高度为0
//行高为0
//将文本转为块级元素
//将元素隐藏
//清除浮动*/
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.float-div{
/*为了兼容IE*/
zoom:1;
}
清除浮动-效果图
备注：清除浮动的几种方式
