CSS学习系列2 -- CSS中的清除浮动

CSS中有一个很常见的问题，就是元素的浮动. 那么，到底什么是元素的浮动呢，我们来看一个例子

举个例子，在一个div里面内部有浮动元素的话，这个浮动元素会让这个div的高度塌陷. 

.myDiv{

   background-color: gray;
   border: solid 1px black;

}

.myDiv img {

   float: left;
}

.myDiv p {

   float: right;
}

<div class="myDiv">
<img src="test.jpb" />
<p>This is for test only</p>
</div>

上面的代码及图示可以看出，浮动元素没有被div完全包围，而是溢出到div的外面来了. 我们再来看网上的一个例子

 从上面这两个图可以看出， 由于div1的浮动，div2的一部分被浮动的元素覆盖，容器的高度比它里面浮动的元素高度还要低. 元素的浮动会彻底造成错误的页面展示。 那么到底如何通过css来清除这种元素的浮动呢

CSS中清除元素的浮动，主要是通过使用css的clear属性.

1. 常用的一种很简单粗暴的方式是 在浮动的元素背后增加一个没有任何意义的空元素,并为该元素指定clear属性. 

<div class="container">
<div style="float:left">我是浮动的元素</div>
<div style="clear:both"><!-- 我用来清除上面元素的浮动--></div>
</div>

这种方式的问题在于添加了一个额外的div标签,这个标签不做任何事情，唯一的目的就是用来清除它上面元素的浮动。这种标签如果在一个html文档中太多，显然会给开发和维护带来不必要的麻烦。而且，web开发中，html是用来决定网页的内容，而css用来决定呈现的样式,而上面的代码却增加了一个html元素div, 仅仅是用来改变呈现的样式.  

那么，如何找出一个替代方案呢。这就要用到css中的伪元素.   CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这个就是"伪元素". 在CSS家族中，有一些css选择器被分类为伪元素(eg:  :first-line, :first-letter, ::selection, :before, :after).  在最初，伪元素的语法是使用":" (一个冒号)，后来，在CSS3中修订后，伪元素使用"::" (两个冒号), 也就是 ::before 和 ::after ，以更好的区分伪元素和伪类 (eg:   :hover, :active等伪类). 但是，无论是单冒号还是双冒号，浏览器都能够识别它们，IE8只支持单冒号格式，为了更好的安全性，建议还是使用单冒号的格式

:after 伪元素 代表的是一个元素之后的最近的元素. 我们可以把这个伪元素的内容设置为一个看不见的空格(content: "020") 或者".", 同时赋予clear属性来清除浮动。 如下例子

.myDiv{

   background-color: gray;
   border: solid 1px black;

}

.myDiv img {

   float: left;
}

.myDiv p {

   float: right;
}

.clearfix:after{

content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {

 /* 触发 hasLayout */

 zoom: 1;
}


<div class="myDiv clearfix">
<img src="test.jpb" />
<p>This is for test only</p>
</div>

上面有一个css .clearfix {zoom:1;} 这是针对IE6和IE7的浏览器，加上这么一条来触发haslayout.

当然，CSS中的这个伪元素除了清除浮动外, 还有很大的应用范围。 通常是通过使用它的content属性来为该元素添加装饰内容, 这个伪元素(虚拟元素)默认是行内元素

比如，我们可以通过如下的css来为链接后面加入内容 "--->"

a::after{

content: "--->";

}

我们来看一个使用css中的after伪元素来实现页面提示的例子

<p>这是上面代码的实现<br />
我们有一些<span data-description="collection of words and sentences">文字</span>有一些<span data-description="small popups which also hide again">提示</span>。<br />把鼠标放上去<span data-description="not to be taken again">看看</span>.
</p>

我们来看看它对应的CSS样式

span[data-description]{
  
     position: relative;
     text-decoration: underline;
     color: #00F;
     cursor: help;
}

span[data-description]:hover::after{
content: attr(data-description);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}

你可以在JSFiddle中粘贴上面代码来看结果