CSS 中的浮动
HTML 页面的文档流
1、标准文档流 --- 面试题
标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式
当前面内容发生了变化，后面的内容位置也会随着发生变化
2、留存弊端
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”
显然标准流已经无法满足需求，这就要用到浮动
以及某些元素会出现的特定区域，这就要用到定位
什么是浮动？
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次
浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去
块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素
浮动的属性
float:
none: 默认值。元素不浮动，并会显示在其在文本中出现的位置
left: 元素向左浮动
right: 元素向右浮动
浮动后的div宽度会变成 0，但是其内边框可能撑起它的宽和高
浮动的特征
1、块级元素失去“块状”换行显示特征，变为行内元素
2、紧贴着上一个浮动元素（同方向）或父元素的边框，如果宽度不够将换行显示
3、占据行内元素的空间、导致行内元素围绕显示 --- 图文环绕效果
4、可以强迫浮动元素换行显示， 使用 clear 属性
clear:
none: 默认值，允许两边都可以有浮动对象
left: 不允许左边有浮动对象
right: 不允许右边有浮动对象
both: 两边都不允许都浮动对象
浮动能做哪些事情？
使多个div显示在同一行
常见的效果：各种导航栏，商品的排版，新闻的排版，文字环绕效果......
浮动的弊端
导致高度塌陷
当对于所有的子元素都设置了浮动之后，而父元素没有去设置高度，
父元素失去了支撑同时父元素的高度消失，缩成了一条线，高度出现了塌陷
解决方案：
1、直接添加高度（不推荐）
高度固定死，内容如果是后端返回的数据不固定的话，不够灵活
2、额外标签法（不推荐）
在最后一个浮动标签后，新加一个标签，给其设置 clear：both
clear: both, 本质是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
3、父级添加 overflow 属性（不推荐）
父元素添加 overflow:hidden
overflow: hidden, 本质是通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
4、使用 after 伪元素清除浮动
.clear::after {
content: '';
display: block;（必须变成块元素）
height:0; 处理兼容，让没有高度
visbility: hidden;处理兼容，让消失
clear: both;
}
.clear {
*zoom: 1;
/* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
}
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素::after，使用zoom:1触发hasLayout
5、使用 before 和 after 双伪元素清除浮动
.clear::after, .clear::before {
content: '';
display: block;
}
.clear::after {
clear: both;
}
.clear {
*zoom: 1;
/* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
}
优点：代码更简洁
缺点：用zoom:1触发hasLayout
