高度塌陷问题

1. 高度塌陷
当父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷。
如何来解决高度塌陷？
方案一：给父元素一个固定的高度
缺点：给父元素固定高度违背了高度自适应的原则，不够灵活
方案二：给父元素添加属性 overflow: hidden;
优点：浏览器支持好，简单；
缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

2. 行内元素、块元素以及行内块元素
块元素：默认竖着排列，设置高度宽度可以生效
常见块元素：div p h1~h6 ul li ol dl dd dl dt

行内元素：默认情况下横着排列，设置高度宽度line-height属性不生效，会把回车键识别为空格
那么如何给行内元素设置宽高呢？方法有三
a.使用display
display:block/inline/inline-block/flex/inline-flex
注：display：none；转化为没有，可以做隐藏效果，隐藏之后内容位置都不在，彻底隐藏。
b.使用float
float：left/right
c.使用position
position:absolute/fixed

行内块元素：横着排列且能设置宽高
常见的行内块元素：img input textare

3. 选择器
包含选择器（后代选择器）
在父级元素后面加空格写标签名称即可
例如：.header p{} 此时权重计算方式为 权重等于累加和
兄弟选择器
相邻的几个元素可以使用

例如：p+img+p{width:100px}   权重=累加的和

4. 其他知识点
文字的字间距 letter-spacing：3px；
文字两端对齐：text-align：justify；