淺談css清除浮動(clearfix和clear)的用法
發(fā)布時間：2023-05-12 08:26:52 作者：yjzhu 
我要評論
我要評論下面小編就為大家?guī)硪黄獪\談css清除浮動(clearfix 和clear)的用法，小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
本文主要是講解如何在 html 中使用 clearfix 和 clear，針對那些剛開始了解 css 的童鞋。關于 clearfix 和 clear 的樣式在這里我就不寫了。
下面就談談對于這兩個 class 的用法，首先我們先看個例子：
<!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>
我們都知道使用浮動會產生很多未知的問題，通過上面的例子我們可以發(fā)現(xiàn) class="demo" 的高度并沒有被里面的 div 給撐開，這是因為里面的 div 產生浮動而脫離了該文檔，因為 demo 本身沒有高度，所以我們看不到它的灰色背景。當然只要給 demo 一個高度就行了，但是這就脫離了本文的目的（有時我們希望外層 div 的高度由里面的內容來決定）。
既然是浮動產生的問題，那么只要清除浮動就可以了，相信高手們有很多清除浮動的方法，比如 overflow:hidden。下面我將介紹用 clearfix 和 clear 來清除浮動。
<!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 清除浮動</h2>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
<div class="clear"></div>
</div>
<h2>用 clearfix 清除浮動</h2>
<div class="clearfix demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
</html>
我們發(fā)現(xiàn)，clearfix 主要是用在浮動層的父層，而 clear 主要是用在浮動層與浮動層之間，和浮動層同一級，如果想要撐開父層的高度，clear 就要放在最后。
當前比較常用的
.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}
很難說明這兩個方法哪個更好，只能說具體需求具體對待。
以上這篇淺談css清除浮動(clearfix和clear)的用法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
- 下面小編就為大家?guī)硪黄猚ss之clearfix的用法深入理解(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2023-05-12
- 這篇文章主要介紹了CSS中使用clearfix清除浮動的方法,作者列出了幾個clearfix的不同的使用方法進行對比,需要的朋友可以參考下2015-07-09
用clearfix:after消除css浮動解決外部div不能撐開問題
如果有一個DIV作為外部容器，內部的DIV如果設置了float樣式，則外部的容器DIV因為內部沒有clear，導致不能被撐開。使用clearfix:after，可以解決這個問題2014-06-16- 大家對css中clearfix并不陌生吧，它的作用就是清除浮動，下面對clearfix的定義及實現(xiàn)原理簡要的為大家做個介紹，另外還有個不錯的示例，喜歡的朋友不要錯過2013-11-05
css清除浮動clearfix:after的用法詳解（附完整代碼）
如果外部有一個div容器，其內部div容器設置了float樣式，則外部的容器div因為內部沒有clear，導致不能撐開2023-05-12- 有時候我們需要清楚浮動的一些操作，這里介紹的是clearfix:after的實例代碼，需要的朋友可以參考下2023-05-12
- 本文主要講解下css中的清除浮動的使用，在網頁布局中此屬性的作用不可小視，它的存在對你的布局好壞有所影響，感興趣的朋友可以參考下哈2013-04-26
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