css高度自适应-父元素随子元素变化

Day16
1、 min-height IE6不兼容问题
正常项目中：最小高度直接用min-height即可。
如果考虑兼容：min-height IE6不兼容。IE6默认把height解析成最小高度。若height 和min-height同时出现，IE6执行的事height固定高度。

最小高度的兼容设置方法：（了解：体会解决问题的思路）
1：min-height:300px;_height:300px;
2:min-height:300px;height:auto!important;height:300px;
A:高版本浏览器解析顺序：
Min-height能识别，也可以识别！important ，所以height：auto；权重最高，这样就能把把height:300px覆盖。
B: IE6解析流程：
Min-height不能识别，也不能识别！important，后写的height：300px; 会把height：auto;覆盖。

	过滤器：

1. 下划线过滤器（IE6过滤器）
   语法：
   _属性：属性值；
   只有IE6能识别带有下划线的属性。
2. ！important （IE6不识别）
   语法：
   属性：属性值！important；
3. 属性过滤器
   当在一个属性前面增加了后，该属性只能被IE7识别，其他浏览器忽略该属性的作用。
   语法：
   *属性：属性值；
   4. \9：IE版本识别；其他浏览器都不识别
   语法：
   属性：属性值\9;
4. \0：IE8及以上版本识别；其他浏览器不识别

2、 高度塌陷
高度塌陷出现的场景：
当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷。
注：浮动的子元素不会撑开父元素的height 或者是 min-height。

解决高度塌陷的方法：

1. 给出现高度塌陷的元素添加：overflow:hidden;
   原理：overflow：hidden；触发了一个BFC（Block formatting Context 布局逻辑）
   BFC规定：计算BFC高度的时候，浮动元素也参与计算。
   弊端：会隐藏掉定位在当前元素外围的内容。

2. 在浮动元素下方（同级）添加一个空的div，给div设置样式
   Div{clear:both;}
   原理：添加的空div添加了{clear：both；}之后，会忽略上方同级添加浮动的元素流出的空间。
   弊端：形成代码的冗余（没出现一个高度塌陷，都需要添加一个div）

Clear:both; 当前元素会忽略上方添加浮动的元素留出来的空间。（闭合浮动）
Clear的属性值：
Clear:left;
Clear:right;
Clear:both;

3. 万能清除法：
   .clear_fix:after{
   Content:”.”;
   Clear:both;
   Display:block;
   Height:0;
   Overflow:hidden;
   Invisibility:hidden;
   }
   .clear_fix{
   Zoom:1;
   } 此设置为IE6浏览器兼容性考虑，可不加。

3、 为对象选择符：
1． 元素选择符:after{
Content:””;
}(规范写法::after)
说明：在某个元素的后面用css的形式添加内容（图片，文本）
2． 元素选择符:before{
Content:””;
}(规范写法::before)
说明：在某个元素的前面用css的形式添加内容（图片，文本）
3． 元素选择符:first-letter{ }(规范写法:: first-letter)
说明：控制第一个字符的样式。
4． 元素选择符:first-line{ }(规范写法:: first-line)
说明：控制第一行的样式。

4、 visibility属性
visibility:hidden;
将元素隐藏，并占据空间，在页面上留下需隐藏元素块的大小的空白。
注：display:none;
将元素彻底隐藏，不会占据空间。