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中粘贴上面代码来看结果