一、 标准文档流下有哪些微观现象？
1. 空白折叠现象
不管你有多少个空格，浏览器只显示一个
2. 高矮不齐，底边对齐
3. 内容多于一行，换行显示
display: block; 独占一行，可设宽高
display: inline; 不独占一行，不能设宽高
display: inline-block; 不独占一行，可设宽高
display:none; 不占位置
visibility: hidden; 不显示，但占位置
二、浮动
float: left | right
效果：两个元素并排显示，并且可以设置宽高。
浮动之后，就不区分行内元素或块元素
三个特性：
1. 浮动的元素脱标
脱标：脱离了标准流
2. 浮动的元素贴靠
3. 浮动的元素有“字围”效果
文字不会被浮动元素遮挡。
4. 浮动的元素有紧凑效果
如果一个元素设置为浮动，并且没有设置宽高，那么就自动收缩为文字的宽高。
margin-right: auto 水平居中
三、浮动带来的问题，清除浮动
子盒子动态高度，父盒子不设置高度。但带来的问题是：
后面的盒子会顶上去，跑到父盒子的下面去被遮盖。
解决问题：清除浮动
第1 种方式： 给父盒子设置高度，不推荐
这种方式不灵活，如果公司产品突然要改，要求父盒子加高，而且不只一处地方，需要手动修改原代码。很麻烦。
第2种方式：clear: both 内墙方法
给浮动元素最后面添加一个元素，并且该元素不浮动，然后设置clear:both 清除别人对我的浮动影响。
clear: left # 清除左边浮动对我的影响。
clear:right # 清除右边浮动对我的影响
这种办法的弊端是，无缘无故多了一个div元素，使结构冗余。
第3种方式：伪元素清除浮动 常用
.clearfix:after{
# 必须要写的这三个内容
content: '';
clear: both;
display: block;
}
# 新浪清除浮动的方法
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
给祖先元素添加类class="clearfix"
第4种清除浮动： overflow
给浮动元素的父元素添加:
overflow: hidden;
内容超出部分叫：overflow
overflow的值有以下几种：
默认：visible; 内容不会被修剪，会呈现在元素框之外。
hidden： 内容会被修剪，并且其余内容是不可见。
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该人父元素继承overflow属性的值。