伪元素选择器（笔记）

一 、伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
(在css中建立新内容以便优化HTML结构)

选择符	解析
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意:

• before和after创建一 个元素,但是属于行内元素
• 新创建的这个元素在 HTML结构中是找不到的,所以我们称为伪元素
• 语法: element::before { }（建立一个盒子）
• before和after必须有content属性
• before在父元素内容里面的前面创建元素, after 在父元素内容里面的后面插入元素、
• 
• 伪元素选择器和标签选择器一样,权重为1

伪元素是盒子的孩子，所以设置定位时除注意“子绝父相”问题外还需关注自身所处位置

二、利用伪元素清除浮动

1.额外标签法也称为隔墙法,是W3C推荐的做法。（建立一个盒子设置css为clear：both；）
2.父级添加overflow属性（溢出部分进行隐藏）
3.父级添加after伪元素（实现代码如下）

  .claerfix::after{

            /* 伪元素必备属性，不添加无法实现效果 */

            content: "";

            /* 清除浮动时插入的元素必须为快级元素 */

            display: block;

            /* 不看见此话元素 */

            height: 0px;

            /* 清除浮动的核心代码 */

            clear: both;

            /* 隐藏元素 */

            visibility: hidden;

        }

4.父级添加双伪元素（对前后都进行清除浮动）

.clearfix:before, . clearfix:after {
content :

/*将元素设置为表格会在同一行显示*/
display:table;
}
. clearfix:after {
clear :both;
}