YOYO的最新BLOG文章

Jun
13

关于伪对象:after的一点补充

No Comments | 717 views

之前我写过一篇文章－用伪对象:after清除浮动。对于firefox，这是个很好的办法。而今天，我偶然发现了一个问题，因为很多次用的时候都没发现，属于一个特殊现象。就是它把定义了:after这个属性的元素所包含的下面的所有元素都加了这个属性。
HTML代码是：

<p class="content_right_content">&nbsp;</p>
 
<h2>Are you looking for:</h2>
<ul>
    <li><img src="../images/arr2.jpg" /> <a href="/product/21/I-know/">I know</a></li>
    <li><img src="../images/arr2.jpg" /> <a href="/product/20/I-m-boy/">I'm boy</a></li>
    <li><img src="../images/arr2.jpg" /> <a href="/product/19/test2/">test2</a></li>
    <li><img src="../images/arr2.jpg" /> <a href="/product/18/lanhai3test/">lanhai3test</a></li>
    <li><img src="../images/arr2.jpg" /> <a href="/product/17/lanhai3/">lanhai3</a></li>
</ul>

阅读全文 ->

Tags: ,
Posted in 刀光剑影
Apr
10

用伪对象:after清除浮动

No Comments | 865 views

当父级容器是自适应高度，而里面有浮动对象时，浏览器会认为容器的高度还没结束，所以不会显示父级容器的背景色和边框，需要清除浮动闭合标签。
我们通常的办法是在后面加一个DIV来清除浮动，使父级容器的高度和内容一样。除了这个方法，我们还可以使用 伪对象 :after，其特点是：不需要另外加个清除DIV.

:after（伪对象）–设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。
代码如下：

div:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Tags: ,
Posted in 想说就说