高度塌陷、伪元素选择器及伪类选择器

高度塌陷：

父元素高度自适应，子元素 float 后，造成父元素高度为0
解决高度塌陷：

1、个给高度塌陷的元素添加一个属性

        overflow:hidden

        触发了BFC，在计算BFC元素高度时，浮动元素也会参与计算

        弊端：溢出隐藏

2、清除浮动
                2.1、在高度塌陷的元素里面的最下面，添加一个空的<div></div>
                2.2、给空的div加一个属性clear:both;

        弊端：会出现很多空div，造成代码冗余，出现很多没有意义的元素，影响性能

3、万能清除法
        

父元素:after{
     content: "";
     display: block;
     height: 0;
     overflow: hidden;<!-- 隐藏元素，占用空间 -->
     visibility: hidden;<!-- 用于隐藏元素，但是依旧占据空间 -->
     clear: both;<!-- 清除浮动 -->
  }

伪元素选择器（content属性）：

::before

::after
伪类选择器：

:link                      未访问

:visited   　　　　  已访问

扫描二维码关注公众号，回复： 11428749 查看本文章

:hover                   鼠标悬停

:active                   鼠标按下

:not(s)                   匹配不含s选择器的元素

:frist-child             父元素的第一个元素

:last-child              父元素的最后一个元素

:only-child             父元素的唯一一个元素

:checked                选中 :checked+伪元素