3.31

总结高度自适应的第一种情况：内容撑开父元素：
1.高度不去设置，或者高度设置auto，内容撑开父元素的高度
2.内容撑开父元素的高度所以要设置最小高度：min-height
过滤器(低版本不识别):height:auto !importent；
最小高的兼容写法：min-height; height:auto !importent；height;
3.浮动元素添加高度自适应：添加浮动元素的父元素自身没有高度会造成高度塌陷。
4.解决高度塌陷的方法：

1.给出现高度塌陷的元素添加：overflow:hidden；
原理：overflow:hidden:触发一个BFC（布局逻辑）
BFC 规定：计算BFC 的高度的时候，浮动元素也参与计算。
弊端：隐藏掉定位在当前元素外围的内容。
2.在浮动元素的下方（同级）添加一个空的div,添加css样式

div{clear:both;}
原理：添加空的div加了clear:both;忽略上方同级添加浮动的元素留的空间，在父元素最底下显示，撑开父元素高度。
弊端：形成代码的冗余（一旦出现高度塌陷就要添加空的div）
3.万能的消除法：
.clear_fix:after{
content:"." ;
clear:both;
display:biock;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
zoom:1;
}
伪对象选择符：
1.元素选择符：after{
content:"";}
说明：在某个元素后面用css的形式添加内容（图片，文本）
2.元素选择符：before{
content:"";}
说明：在某个元素前面用css的形式添加内容（图片，文本）
3.元素选择符：first-letter{ }
说明：控制第一个字符的样式
4.元素选择符：first-line{ }
说明：控制第一行的样式
总结高度自适应的第二种情况：子元素的高度随着父元素的高度改变：
需求：让一个元素在浏览器窗口铺满
前提条件：
body,html{
height:100%;}