产生条件
    1父元素无高度 高度由子元素撑开
    2子元素设置了浮动，脱离了文档流，撑不开父元素
        子元素有浮动时且父元素未设置高度，子元素浮动后，父元素的高度为0

解决高度塌陷的方法
    1.给浮动元素添加一个同级元素给这个同级元素设置style clear：both；添加的这个同级元素不能浮动；
    clear属性：left/right/both
    弊端：代码中会多余很多空代码 代码冗余
    2给父元素添加  overflow：hidden（触发规范）弊端：父元素之外的元素会被隐藏
    3万能清楚法 ie9以下不适用
        利用伪元素
            选中元素：：after{}/before{}给选中元素添加一个最后的子元素/最前面子元素  子元素的最后：：after{
                content："";//必须要有
                color:red;
                background:blue;
                display:block;
                height:0;
                clear:both;
            }

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；

什么是高度塌陷？
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

如何来解决高度塌陷？
方案一：给父元素一个固定的高度
缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。

方案二：给父元素添加属性 overflow: hidden;
优点：浏览器支持好，简单；
缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式
div{

clear: both;

height: 0;

overflow: hidden;

}
优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：在页面中添加无意义的div，容易造成代码冗余。

方案四：万能清除浮动法
在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下：
父元素:after{

content: “”;

height: 0;

clear: both;

overflow: hidden;

display: block;

visibility: hidden;

}
优点：不会造成代码冗余，剩余代码性能优化，推荐使用。

什么是高度塌陷？

    父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

 

如何来解决高度塌陷？

方案一：给父元素一个固定的高度

    缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。

 

方案二：给父元素添加属性 overflow: hidden;

    优点：浏览器支持好，简单；

    缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

 

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式

div{
    clear: both;
    height: 0;
    overflow: hidden;
}

    优点：所有浏览器都支持，并且容器溢出不会被裁剪；

    缺点：在页面中添加无意义的div，容易造成代码冗余。

 

方案四：万能清除浮动法

    在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下：

父元素:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

    优点：不会造成代码冗余，剩余代码性能优化，推荐使用。