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)
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} /*所有主流瀏覽器都支持 :after 偽元素。*/
.clearfix{*+height:1%;}/*不知道有什么用處,不加ie7也沒有問題*/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}//只針對(duì)IE6/7
測(cè)試代碼:
<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也沒有問題*/
.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)元素,不過可以使用屬性display改變這一點(diǎn)。
復(fù)制代碼
代碼如下:.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} /*所有主流瀏覽器都支持 :after 偽元素。*/
.clearfix{*+height:1%;}/*不知道有什么用處,不加ie7也沒有問題*/
.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也沒有問題*/
.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)元素,不過可以使用屬性display改變這一點(diǎn)。
相關(guān)文章
- 下面小編就為大家?guī)硪黄猚ss之clearfix的用法深入理解(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2023-05-12
淺談css清除浮動(dòng)(clearfix和clear)的用法
下面小編就為大家?guī)硪黄獪\談css清除浮動(dòng)(clearfix 和clear)的用法,小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2023-05-12- 這篇文章主要介紹了CSS中使用clearfix清除浮動(dòng)的方法,作者列出了幾個(gè)clearfix的不同的使用方法進(jìn)行對(duì)比,需要的朋友可以參考下2015-07-09
用clearfix:after消除css浮動(dòng)解決外部div不能撐開問題
如果有一個(gè)DIV作為外部容器,內(nèi)部的DIV如果設(shè)置了float樣式,則外部的容器DIV因?yàn)閮?nèi)部沒有clear,導(dǎo)致不能被撐開。使用clearfix:after,可以解決這個(gè)問題2014-06-16css中clearfix清除浮動(dòng)的用法及其原理示例介紹
大家對(duì)css中clearfix并不陌生吧,它的作用就是清除浮動(dòng),下面對(duì)clearfix的定義及實(shí)現(xiàn)原理簡(jiǎn)要的為大家做個(gè)介紹,另外還有個(gè)不錯(cuò)的示例,喜歡的朋友不要錯(cuò)過2013-11-05css清除浮動(dòng)clearfix:after的用法詳解(附完整代碼)
如果外部有一個(gè)div容器,其內(nèi)部div容器設(shè)置了float樣式,則外部的容器div因?yàn)閮?nèi)部沒有clear,導(dǎo)致不能撐開2023-05-12clear 萬能清除浮動(dòng)(clearfix:after)
有時(shí)候我們需要清楚浮動(dòng)的一些操作,這里介紹的是clearfix:after的實(shí)例代碼,需要的朋友可以參考下2023-05-12overflow:hidden line-height clearfix:after使用方法介紹
overflow:hidden的作用是隱藏溢出,line-height指的是在DIV中的元素上下居中接下來詳細(xì)介紹它們的用法,感興趣的朋友可以了解下哦2013-01-08什么是clearfix (一文搞清楚css清除浮動(dòng)clearfix)
clearfix 是一種 CSS 技巧,可以在不添加新的 html 標(biāo)簽的前提下,解決讓父元素包含浮動(dòng)的子元素的問題。這個(gè)技巧的版本是很多的,最流行的一個(gè)是 Micro Clearfix Hack2023-05-12