清除浮动方式 + css属性继承 + 3栏布局方式+ （::after区别:after）

1：清除浮动

•  父元素加 overflow:hidden空元素设置
•  在浮动的盒子之下，放一个标签，在这个标签中使用 clear: both

:after伪元素添加了clear:both

2: css属性继承

     font类： font-size，font-weight, font-family

     text类: text-align ,text-indent

     color: color

3: 三栏布局方式

    1:  自身浮动法：左边左浮动， 右边右浮动，中间放最后

.d1 {float: left;}
.d3 {float: right;}
.d2 {}

   2:  绝对定位法：左右两边采用绝对定位，分别固定于页面的左右两侧，中间用左右margin撑开距离 

.pp1 {position: absolute;left: 0;top: 0;}
.pp2 {margin: 0 20px;}
.pp3 {position: absolute;right: 0;top: 0;}

   3: flex布局： 两边固定中间自适应( 左右固定宽，中间flex：1)

.f {
     flex-wrap: wrap; // 必要时换行，nowrap:不换行， wrap-reverse：必要时换行，以相反的顺序。
     flex-direction: row;  //水平，row-reverse： 与 row 相同，但是以相反的顺序。
        // column：垂直显示，row-column：与 column 相同，但是以相反的顺序。
     display: flex;
}
.f1 {width: 100px;}
.f2 {flex: 1;}
.f3 {width: 100px;}

4:  :after/::after 和 :before/::before的异同

相同点

• 都可以用来表示伪类对象，用来设置对象前的内容
• :before 和 ::before 写法是等效的;  :after 和 ::after 写法是等效的

不同点

• :before / :after 是Css2 的写法，::before / ::after 是Css3的写法
• :before/:after 的兼容性要比 ::before/::after 好 ，
• 不过在H5开发中建议使用 ::before/::after 比较好
   

5: 伪类 和 伪元素

     伪类：

• :hover
• :active
• : focus
• :last-child
• :link
• :visited
• :nth-child()
• :target 

                  

     伪元素： 向某些选择器设置特殊效果

        :after: css2写法，   ::after: css3写法（比较常用）【2种写法效果一致】

        :before

总结：伪类 与 伪元素的特性及其区别：

1. 伪类 本质上是：为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素 本质上是：创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素；