欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

clearfix:after清除浮動(dòng)的用法及測(cè)試代碼

  發(fā)布時(shí)間：2013-04-26 15:11:40   作者：佚名   我要評(píng)論
本文主要講解下css中的清除浮動(dòng)的使用，在網(wǎng)頁(yè)布局中此屬性的作用不可小視，它的存在對(duì)你的布局好壞有所影響，感興趣的朋友可以參考下哈
今天回顧一下css中的清除浮動(dòng)

復(fù)制代碼
代碼如下:

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} /*所有主流瀏覽器都支持 :after 偽元素。*/
.clearfix{*+height:1%;}/*不知道有什么用處，不加ie7也沒(méi)有問(wèn)題*/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}//只針對(duì)IE6/7

測(cè)試代碼：

復(fù)制代碼
代碼如下:

<html >
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style type="text/css">
/*所有主流瀏覽器都支持 :after 偽元素。*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}/*不知道有什么用處，不加ie7也沒(méi)有問(wèn)題*/
.box{ background:#111;width:500px; position:relative;}
.l{float:left; background:#333;width:200px; height:100px;}
.r{float:right;background:#666;width:200px; height:200px;}
.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
</style>
<div class="box clearfix">
<div class="l">left</div>
<div class="r">right</div>
<div class="s">absolute</div>
</div>
</body>
</html>

:after 偽元素在元素之后添加內(nèi)容。這個(gè)偽元素允許創(chuàng)作人員在元素內(nèi)容的最后面插入生成內(nèi)容。默認(rèn)地，這個(gè)偽元素是行內(nèi)元素，不過(guò)可以使用屬性display改變這一點(diǎn)。

相關(guān)文章

最新評(píng)論