淺談css清除浮動(dòng)(clearfix和clear)的用法
我要評(píng)論本文主要是講解如何在 html 中使用 clearfix 和 clear，針對(duì)那些剛開(kāi)始了解 css 的童鞋。關(guān)于 clearfix 和 clear 的樣式在這里我就不寫了。
下面就談?wù)剬?duì)于這兩個(gè) class 的用法，首先我們先看個(gè)例子：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>
我們都知道使用浮動(dòng)會(huì)產(chǎn)生很多未知的問(wèn)題，通過(guò)上面的例子我們可以發(fā)現(xiàn) class="demo" 的高度并沒(méi)有被里面的 div 給撐開(kāi)，這是因?yàn)槔锩娴?div 產(chǎn)生浮動(dòng)而脫離了該文檔，因?yàn)?demo 本身沒(méi)有高度，所以我們看不到它的灰色背景。當(dāng)然只要給 demo 一個(gè)高度就行了，但是這就脫離了本文的目的（有時(shí)我們希望外層 div 的高度由里面的內(nèi)容來(lái)決定）。
既然是浮動(dòng)產(chǎn)生的問(wèn)題，那么只要清除浮動(dòng)就可以了，相信高手們有很多清除浮動(dòng)的方法，比如 overflow:hidden。下面我將介紹用 clearfix 和 clear 來(lái)清除浮動(dòng)。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>如何在html中使用clearfix和clear</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#f90;height:100px;width:100px;}
.item2{background:#fc0;height:200px;width:100px;}
</style>
</head>
<body>
<h2>用 clear 清除浮動(dòng)</h2>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
<div class="clear"></div>
</div>
<h2>用 clearfix 清除浮動(dòng)</h2>
<div class="clearfix demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>
我們發(fā)現(xiàn)，clearfix 主要是用在浮動(dòng)層的父層，而 clear 主要是用在浮動(dòng)層與浮動(dòng)層之間，和浮動(dòng)層同一級(jí)，如果想要撐開(kāi)父層的高度，clear 就要放在最后。
當(dāng)前比較常用的
.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
很難說(shuō)明這兩個(gè)方法哪個(gè)更好，只能說(shuō)具體需求具體對(duì)待。
以上這篇淺談css清除浮動(dòng)(clearfix和clear)的用法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇css之clearfix的用法深入理解(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2023-05-12
- 這篇文章主要介紹了CSS中使用clearfix清除浮動(dòng)的方法,作者列出了幾個(gè)clearfix的不同的使用方法進(jìn)行對(duì)比,需要的朋友可以參考下2015-07-09
用clearfix:after消除css浮動(dòng)解決外部div不能撐開(kāi)問(wèn)題
如果有一個(gè)DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因?yàn)閮?nèi)部沒(méi)有clear，導(dǎo)致不能被撐開(kāi)。使用clearfix:after，可以解決這個(gè)問(wèn)題2014-06-16css中clearfix清除浮動(dòng)的用法及其原理示例介紹
大家對(duì)css中clearfix并不陌生吧，它的作用就是清除浮動(dòng)，下面對(duì)clearfix的定義及實(shí)現(xiàn)原理簡(jiǎn)要的為大家做個(gè)介紹，另外還有個(gè)不錯(cuò)的示例，喜歡的朋友不要錯(cuò)過(guò)2013-11-05css清除浮動(dòng)clearfix:after的用法詳解（附完整代碼）
如果外部有一個(gè)div容器，其內(nèi)部div容器設(shè)置了float樣式，則外部的容器div因?yàn)閮?nèi)部沒(méi)有clear，導(dǎo)致不能撐開(kāi)2023-05-12clear 萬(wàn)能清除浮動(dòng)(clearfix:after)
有時(shí)候我們需要清楚浮動(dòng)的一些操作，這里介紹的是clearfix:after的實(shí)例代碼，需要的朋友可以參考下2023-05-12clearfix:after清除浮動(dòng)的用法及測(cè)試代碼
本文主要講解下css中的清除浮動(dòng)的使用，在網(wǎng)頁(yè)布局中此屬性的作用不可小視，它的存在對(duì)你的布局好壞有所影響，感興趣的朋友可以參考下哈2013-04-26overflow:hidden line-height clearfix:after使用方法介紹
overflow:hidden的作用是隱藏溢出,line-height指的是在DIV中的元素上下居中接下來(lái)詳細(xì)介紹它們的用法，感興趣的朋友可以了解下哦2013-01-08什么是clearfix (一文搞清楚css清除浮動(dòng)clearfix)
clearfix 是一種 CSS 技巧，可以在不添加新的 html 標(biāo)簽的前提下，解決讓父元素包含浮動(dòng)的子元素的問(wèn)題。這個(gè)技巧的版本是很多的，最流行的一個(gè)是 Micro Clearfix Hack2023-05-12