after及before伪元素及解决父元素塌陷的几种方法

一.伪类和伪元素

CSS中伪类和伪元素有很多，也很好用！如果熟练使用的话可以解决很多问题

首先明白什么是伪类：伪类是基于当前元素的状态，而不是元素的id class等静态标志，它是动态变化的，它会在一个状态时得到一个伪类，在下一刻没有这个状态时失去这个伪类，它和class有点类似，但是是动态添加的，是文档外抽象的，所及叫伪类。

什么是伪元素：伪元素是对元素中特定的内容进行操作，它比伪类更加深入，所以它的动态性很低，他就是为了操作某个元素的比如第一行，或者第一个字符普通选择器无法操作的元素，它是基于元素的抽象，所以叫做伪元素。

after和befor伪元素，顾名思义，就是一个节点的前面和后面进行操作！通常我们需要给他的父元素设置after和before这样才会对它的子元素起作用，如果你直接给元素本身设置，那它是不会起你想要的作用的，为你带来一些别的效果！

CSS：

html：

浏览器执行效果

效果显而易见，content是必须的，用来装你要显示的内容，就算你不需要内容，也要写出来，写成content：“”；这样他才会起作用，否则它别的效果不会起作用！另外他们默认是display:inline是行内元素。

大家可能会对.phonenumber伪元素中content内容感兴趣，它是html和css中一些特殊符号的标识，更多的特殊符号大家可以看：http://www.cnblogs.com/pianruijie/p/7844428.html

在对a元素的伪元素中，我们可以用attr方法来获取一些元素的属性，如href，title，前提是它们得存在！

明白了after before的基本作用之后我们就可以做一些别的了，事实上很多时候它们起的作用可以让大家把一个元素当做三个元素使用！

我们这里做一件事情，用after before结合绝对定位实现float：center的效果

<div class = "box"><!--实现float：center-->
            <img src="img/1.jpg" id = "logo" alt="" />
            <div id = "left">
                  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </div>
            <div id = "right">
                  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </div>
        </div>

 　　　　　　　.box{
                  width: 60%;
                  margin: 40px auto;
                  position: relative;
             }
             #logo{
                 width: 200px;
                 height: 150px;
                 position: absolute;
                 left:50%;
                 margin-left: -100px;
                 top:;
             }
             #left{
                 width: 49%;
                 float: left;
             }
             #right{
                 width: 49%;
                 float:right;
             }
             #left::before, #right::before { content: ""; width: 100px; height: 150px; }
             #left:before { float: right; }
             #right:before { float: left; }

看过之后发现原理其实很简单！就是一个left框一个right框用来装文本内容，分别设置左右浮动，然后中间的图片绝对定位，这时候你会发现你的图片覆盖在文本上面，你就需要让你的文本听话的让出一些位置给图片，从而让文本和图片都可以好好地显示。于是我们给left框和right框各自加了一个before伪元素，然后设置它们的宽为图片的一半，高和图片一样，然后一个设置左浮动一个设置右浮动，这样正好把图片装起来，看上去就是文本为图片让路了！

浏览器效果图：

二：解决父元素塌陷的几种方法。

首先明白什么时候会发生父元素塌陷：当父元素的高没有设置或者设置为auto，如果它的子元素浮动了，那么此时它的父元素就塌陷了，我们可以做一些事情！讲他的父元素撑起来

方法1：加一个after伪元素

为浮动元素的父元素设置一个agter伪元素，注意此时要将after设置为块级元素，inline或者inline-block不会起作用，其实上面三个属性都是必须的，至于他们的意图也很明显，content是必须的，clear需要清除浮动，负责他和浮动元素位于一行，而且高度为0，也还是不会起作用！

页面效果：

 

方法二：为父元素设置一个over-flow：hidden属性

这样可以触发BFC机制，什么叫BFC机制呢？

从上面可以看出来所谓的BFC机制就是块格式上下文，当元素中出现float不为none、position:absolute;、overflow不为visible的时候都会触发BFC机制。触发BFC后会为它的内容建立新的块格式化的上下文，就是格式化一下上下文即重新计算这个元素。这个计算就包括了内部所有元素包含了浮动的元素，因此才会解决塌陷问题。

这个代码就非常简单清晰了！
这是效果图：

明显也达到了效果！

————————我说的这些都是非常基础的东西！这些东西肯定有别的实现方法，我这里的这些是我经常用到的！如果大家有更多更好的方法，请提出来大家多多交流，共同进步！