什么是浮动
浮动的本质：实现文字环绕效果
元素脱离文档流不脱离文字流
脱离文档流：假如A元素浮动了，原本排在该元素之后的元素发现A元素不在这个文档流了，就会无视它往上接到A元素前面的元素之后
不脱离文字流：文字并不会无视它，还会环绕A元素
使用position：absolute，脱离文字流，直接覆盖
浮动会导致父元素的高度塌陷
BFC
块级格式化上下文，当创建BFC之后元素就会把里面的东西视为自己的东西，包括浮动元素，然后创建一个私有领域给包裹进来。
创建BFC 的几种方法：
- float不为none
- overflow不为visible
- display为table-cell、table-captain、inline-block
-
position不为static、relative
BFC的特性：
1.让原本会叠加的上下外边距叠加无效。相邻盒子margin垂直方向会重
2.BFC不围绕浮动元素
清除浮动的方法(解决父元素高度塌陷)
- clear:both
- 创建BFC
- 通过在浮动元素末尾添加一个空的标签例如并设置样式为clear:both | left | right ，其他标签br等亦可
<div class="parent">
<div class="child"></div>
<div style="clear: both;"></div>
</div>
优点：简单
缺点：增添新标签，不符合语义化
<div class="parent">
<div class="child"></div>
<br clear='all'>
</div>
- 伪元素:after
由于IE6-7不支持:after，使用zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素
.clearfix:after {
content:"";
display:block;//通过 content 在元素的后面生成了内容为空的块级元素
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
zoom:1;
}
优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加。
.clearfix:after {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix应该用于包含浮动子元素的父元素上
float浮动
使用浮动将造成：
元素block块状化
破坏性造成的去空格化
