clearfix:after清除浮動的用法及測試代碼
發(fā)布時間：2013-04-26 15:11:40 作者：佚名 
我要評論
我要評論本文主要講解下css中的清除浮動的使用，在網(wǎng)頁布局中此屬性的作用不可小視，它的存在對你的布局好壞有所影響，感興趣的朋友可以參考下哈
今天回顧一下css中的清除浮動
.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;}//只針對IE6/7
測試代碼：
<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)容。這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最后面插入生成內(nèi)容。默認地，這個偽元素是行內(nèi)元素，不過可以使用屬性display改變這一點。
復制代碼
代碼如下:.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;}//只針對IE6/7
測試代碼：
復制代碼
代碼如下:<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)容。這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最后面插入生成內(nèi)容。默認地，這個偽元素是行內(nèi)元素，不過可以使用屬性display改變這一點。
相關文章
- 下面小編就為大家?guī)硪黄猚ss之clearfix的用法深入理解(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2023-05-12
- 下面小編就為大家?guī)硪黄獪\談css清除浮動(clearfix 和clear)的用法，小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2023-05-12
- 這篇文章主要介紹了CSS中使用clearfix清除浮動的方法,作者列出了幾個clearfix的不同的使用方法進行對比,需要的朋友可以參考下2015-07-09
用clearfix:after消除css浮動解決外部div不能撐開問題
如果有一個DIV作為外部容器，內(nèi)部的DIV如果設置了float樣式，則外部的容器DIV因為內(nèi)部沒有clear，導致不能被撐開。使用clearfix:after，可以解決這個問題2014-06-16- 大家對css中clearfix并不陌生吧，它的作用就是清除浮動，下面對clearfix的定義及實現(xiàn)原理簡要的為大家做個介紹，另外還有個不錯的示例，喜歡的朋友不要錯過2013-11-05
css清除浮動clearfix:after的用法詳解（附完整代碼）
如果外部有一個div容器，其內(nèi)部div容器設置了float樣式，則外部的容器div因為內(nèi)部沒有clear，導致不能撐開2023-05-12- 有時候我們需要清楚浮動的一些操作，這里介紹的是clearfix:after的實例代碼，需要的朋友可以參考下2023-05-12
overflow:hidden line-height clearfix:after使用方法介紹
overflow:hidden的作用是隱藏溢出,line-height指的是在DIV中的元素上下居中接下來詳細介紹它們的用法，感興趣的朋友可以了解下哦2013-01-08什么是clearfix (一文搞清楚css清除浮動clearfix)
clearfix 是一種 CSS 技巧，可以在不添加新的 html 標簽的前提下，解決讓父元素包含浮動的子元素的問題。這個技巧的版本是很多的，最流行的一個是 Micro Clearfix Hack2023-05-12