垂直对齐方式，overflow,text-overflow,white-space属性和解决高度塌陷的方法总结

垂直对齐

什么是垂直对齐：在垂直方向上设置元素位置
注：只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性
**应用场景：**log垂直居中，下拉菜单垂直居中，控制文本与图片的位置
语法：vertical-align
属性值：
middle/top/text-top/bottom/tex-bottom/baseline(默认值)
middle[实现垂直居中]
text-top[重要]
text-bottom[文字的最下方]
top[line-height的最上方]
bottom[line-height的最下方]
bottom如果父级元素设置了line-height，那么bottom在父级div的最下方

overflow属性

溢出的内容处理
相关属性值：
overflow:hidden;溢出隐藏
overflow:scroll;显示滚动条【不管是否溢出，一直存在】
overflow:auto;溢出时显示滚动条
overflow:visible;默认

text-overflow属性

溢出显示
text-overflow:clip;不显示省略号，默认的
text-overflow:ellipsis;单行文本溢出时显示省略号

white-space属性

white-space:normal;默认
white-space:pre;保留所有空白区域，换行显示
white-space:pre-wrap;保留部分空白区域，强制换行(段前有空格)
white-space:pre-line;保留部分空白区域，换行显示(顶格显示)
white-space:nowrap;强制一行显示

高度自适应

尽量采用百分比形式，而不是具体的像素值
min-height:像素值; 预留的最小高度区域
max-height:像素值; 预留的最大高度区域，必须搭配overflow:hidden使用

清除高度塌陷的三种解决方法：

1.给产生高度塌陷的元素加overflow:hidden
实现原理：触发bfc,bfc在计算高度时会把浮动的元素的高度计算在内
缺点：如果有定位的元素时，则会隐藏定过位的元素【切记！】
2.给产生高度塌陷的元素后面添加一个div：并且给它设置高度为0，clear：both【清除浮动对添加的div的影响】
实现原理：清除浮动带来的影响
缺点：代码冗余
3.万能法:
名字:after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
visibisity:hidden;
}
好处：
1，如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量
2，避免了定位元素被隐藏