高度塌陷的3种解决方法

Css高度自适应

1、高度自适应：高度不写，就可以达成自适应，

                           父元素的高度由内容撑开，

2、不设置高和高设置为100%是有区别的，

3、但是一般建议写最小高：min-height

               当内容没有时也会有一定的区域存在，

               当内容增多时，也会随着内容撑大。

4、子元素撑开父元素：子元素高度设置100%。

伪元素：

伪元素标志：2个冒号，但是写一个也能生效，但是建议写两个。

伪元素相当于假标签，默认是一个内联元素。

标签名：：after{}在标签后面加内容
标签名：：before{}在标签前面加内容

这两个需要和content结合使用

标签名：：first-letter{}对元素内的第一个字进行样式操作
标签名：：first-line{}对元素内的第一行进行样式操作

元素的隐藏：

1、display：none==========不占位置

2、opacity：0；===========占位

3、visibility：hidden；======占位

4、宽高设置为0再设置overflower：hidden；（投机取巧的方式，不推荐）

width：0;
height:0;
overflower:hidden;

解决高度塌陷的完美解决方式：

1、给父元素设置overflower：hidden

2、在浮动元素后面添加一个空标签，给空标签清除浮动。clear：all。

3、给父元素写一个万能清除法（万能清除法）

元素名：：after{
content:"";空内容
display:block;
clear:both;
}


为避免content:""内被添加内容，可以添加几句
width：0；
height：0；
visibility：hidden；完全隐藏
overflow：hidden；超出隐藏

万能清楚法的名字：clearfix、