清除浮动的七种方法
浮动的定义，
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来。
浮动（float）的特征（前三个特征跟 inline-block 一样）
1. 在一排显示
2. 支持宽高
3. 默认内容撑开宽度
4. 脱离文档流
5. 提升层级半层（不知道"半层"是什么意思）
示例，浮动的图文环绕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字环绕</title>
<style>
div{
width:250px;
}
img{
width:120px;
float:left;/* 浮动也上可以做到图文环绕，要想让文字跟图片在同一行显示，图片加上 float:left */
}
p{
text-align:justify;
font: 16px/1.5 "Microsoft Yahei";
}
</style>
</head>
<body>
<div>
<img src="http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png"/>
<p>原标题：神奇大片《东方风来》带你感受“奇妙进博会”新时代，全球共享未来。从何时起，这个熟悉的星球忽然变得陌生？</p>
</div>
</body>
</html>相关样式
float:left; right | none | inherit
clear:left; right | both | inherit
clear:both; 在左右两侧不允许浮动元素，
任何的版本的 Internet Explorer（包括IE8）都不支持属性值 inherit
清除浮动的七种方法
浮动有一定的破坏性，浮动的特征中有一条是脱离文档流
1. 子元素.item 与他的父级 .box，没在一个文档流上了，层级就不一样了
2. 父级 .box 元素没有设置高度，他的高度应该由他的内容撑开
3. 一但内容与他的父级不在同一层的时候，父级就包不住了，就影响布局了，所有要清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box{
border:1px solid orange;
}
.item{
height:150px;
width:150px;
background:yellow;
float:left; /* 浮动 */
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>1、加高度（问题扩展不好）
目的就是让父级包住子级，问题是扩展不好，如果项目是一个高度不固定，比如瀑布流，那么加高就不行了，扩展性不好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加高度</title>
<style>
.box{
border:1px solid orange;
height:150px;
}
.item{
height:150px;
width:150px;
background:yellow;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>2、给父级加浮动
这个方法的问题
1. 给每个父级都要加浮动，.box 的父级是 body，body 的父级是 html，给这些标签加浮动不合适
2. 页面中所有的元素都加浮动，margin 左右自动 auto 失效（float bad!）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>给父级加浮动</title>
<style>
.box{
border:1px solid orange;
/*
width:150px;
margin:0 auto; 浮动影响影响居中
*/
float:left;
}
.item{
height:150px;
width:150px;
background:yellow;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>3、inline-block 清除浮动方法
设置父级 display 属性为行块盒 inline-block，虽然也可以清除浮动，问题是导致 margin 左右 auto 失效不能居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline-block 清除浮动方法</title>
<style>
.box{
border:1px solid orange;
display:inline-block; /* 清除浮动 */
width: 160px;
/* margin: 0 auto; 不能居中显示 */
}
.item{
height:150px;
width:150px;
background:yellow;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>4、空标签清除浮动
这个方法的问题
1. 每一个需要清楚浮动得地方都需要放一个空标签
2. IE6 最小高度19px（ 解决浮动后，ie6 下还有 2px 偏差 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>空标签清除浮动</title>
<style>
.box{
border:1px solid orange;
}
.item{
height:150px;
width:150px;
background:yellow;
float:left;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="clearfix"><!-- 清除浮动用的空标签 --></div>
</div>
</body>
</html>5、<br> 清除浮动
<br>标签下有一个clera属性 <br clera="all">
问题与空标签一样，只要有浮动的地方就要增加一个 <br clera="all"> 标签，不符合工作中，结构、样式、行为，三者分离的要求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br清除浮动</title>
<style>
.box{
border:1px solid orange;
}
.item{
height:150px;
width:150px;
background:yellow;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<br clear="all" />
</div>
</body>
</html>6、after伪类清浮动方法（主流方法）
:after 伪类清除浮动方法（现在主流方法）
after 伪类，IE6~7下不兼容 :after{ }
zoom 缩放，触发 IE下haslayout，使元素根据自身内容算计宽高，FF 不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>after伪类清除浮动</title>
<style>
.clearfix{
*zoom:1; /* 兼容低版本IE */
}
.clearfix:after{
content:"";
display:block; /* br标签清除浮动都是块元素,这里也转成块 */
clear:both;
}
.box{
border:1px solid red;
}
.item{
width:150px;
height:150px;
background:yellow;
margin-right:20px;
float:left;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>7、overflow: hidden 方法清除浮动
BFC意思是，块级元素格式上下文，
只要触发的 BFC/haslayout 这个区域就是独立的区域不受外界影响，
知道那些属性可以触发 BFC 或 haslayout，我们就可以解决很多问题。
BFC（block formatting context）标准浏览器下（IE6~7不算标准浏览器，IE8半标准浏览器）, 在哪些情况下可以触发 BFC？
1. float 的值不为 none
2. overflow 的值不为 visible
3. display 的值为 table-cell, table-caption, inline-block 中任何一个
4. position 的值不为 relative 和 static
5. width | height | min-width | min-height:(!auto)
他们的值不是 aotu 的时候，haslayout IE浏览器
1. writing-mode:tb-rl
2. -ms-writing-mode:tb-rl
3. zoom:(!mormal)
Ps：zoom的值，不是为正常就能触发 haslayout
voerflow: hidden voerflow 是溢出都意思，他不仅清除能浮动也能触发BFC，很多地方能用到他（需要配合宽度，或者zoom属性兼容IE6 IE7）
overflow: scroll | auto | hidden
voerflow: hidden; 溢出隐藏(裁刀)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow:hidden 清除浮动</title>
<style>
.box{
border:1px solid red;
overflow:hidden;
/* 给父级加上 */
}
.item{
width:150px;
height:150px;
background:yellow;
margin-right:20px;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>