伪元素选择器+高度塌陷的解决办法

伪元素选择器

    伪元素：假的元素，自己创造出来的，让页面显示对应的内容。
    伪类选择器：鼠标的效果，需要配合鼠标的事件才能触发。
    如何查看伪元素的元素类型：通过伪元素选择器加进来的元素是一个行内元素。

修饰文本的第一行，只修饰第一行

       使用方法：：first-line

修饰第一个字符

       使用方法： ：first-letter

向元素内部正前方添加内容

使用方法：
元素:before{/*这个冒号不允许带空格*/
content:"";

}
必须配合出现：content必须携带

向元素内部正后方添加内容

使用方法：
元素:after{/*这个冒号不允许带空格*/
content:"";

}
必须配合出现：content必须携带

高度塌陷

高度塌陷：浮动，父子关系中不设置高度，只给子元素设置宽度，当子元素添加浮动后，会脱离文档流，父元素高度会降低===效果称之为高度塌陷=父元素高度降低了。
解决办法：
1）给父元素添加一个高度，建议使用最小高度。
2）高度塌陷本质原因就是盒子上去补位了。不让补位元素上去补位：清楚浮动就行。clear：both
3）特殊情况：父元素里面有一个子元素的时候。给子元素添加浮动=照样会产生高度塌陷
使用overflow：hidden=触发BFC，触发BFC后会让浮动的元素继续参与高度的计算
4）方便快捷的方法：
万能清楚法：

使用方法：
元素:after{/*这个冒号不允许带空格*/
content:"";
display：block;
clear:both;
}