【css】---高度塌陷

 

高度塌陷：

场景：子元素有浮动，父元素没有设置高度或者是设置最小高度，父元素会出现高度塌陷。

高度塌陷的解决方法：

1：给高度塌陷的元素设置overflow:hidden;

原理：因为overflow:hidden;触发了一个BFC

BFC布局规则：计算BFC高度的时候，里面的浮动元素也参与计算。

弊端：会隐藏掉定位在当前元素外面的内容、。

 

高度自适应第一种情况：

当height:auto 或者是 height不设置 子元素撑开父元素height

 

需求：

a:当内容少，让父元素保持一个最小高度

b:当内容多，让父元素被内容撑开。

 

最小高度的设置方法：

min-height (最小高度)  

 

宽度自适应：

块状元素，如果width属性不设置或者设置为width:100%; 当前元素的宽跟随父元素产生变化。

 

IE6不识别min-height

IE6解析height 默认解析的就是最小高度

 

 

解决：

1:min-height:value;_height:value;

2:min-height:300px;height:auto!important;height:300px;

 

IE6不识别min-height

IE6解析height 默认解析的就是最小高度

 

 

解决：

1:min-height:value;_height:value;

2:min-height:300px;height:auto!important;height:300px;

 

高度塌陷：

场景：子元素有浮动，父元素没有设置高度或者是设置最小高度，父元素会出现高度塌陷。

 

 

 

高度塌陷的解决方法：（清除浮动！！！ 闭合浮动！！）

1：给高度塌陷的元素设置overflow:hidden;

原理：因为overflow:hidden;触发了一个BFC

BFC布局规则：计算BFC高度的时候，里面的浮动元素也参与计算。

弊端：会隐藏掉定位在当前元素外面的内容。

 

2：给出现高度塌陷的元素里面，放在浮动元素的后面，添加一个空div,并且给div{clear:both;}

原理：clear:both;忽略上面的浮动元素预留出的空间

弊端：形成不必要的空标签，代码冗余

 

 

3：万能清除法：

 

选择符（高度塌陷的元素）：

after{

content:"";

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;

}

 

高度自适应第二种情况：

需求：让子元素的高度跟随父元素高度进行变化。

 

 

 

case:实现一个元素在浏览器窗口铺满。必须html,body{height:100%;}

 

伪对象：

1：

：after{content:"在之后添加的内容";}

 

2:

：before{content:"在之前添加的内容"}

 

3:

:first-letter{}

 

4:

：first-line{}

 

 

注：伪对象选择符用在块状元素上面！！！