css清理浮動有什麼作用？清理浮動的方法（介紹）-css教學-PHP中文網

首頁

web前端

css教學

css清理浮動有什麼作用？清理浮動的方法（介紹）

青灯夜游

Sep 17, 2018 am 11:21 AM

clearcssoverflow浮動

在前端開發過程中，我們常常會使用到浮動(float)，這個我們即愛又恨的屬性。愛，是因為透過浮動，我們能很方便地進行佈局；恨，是因為浮動之後遺留下來太多的問題需要解決。本章為大家介紹css為何要清除浮動，以及如何清除浮動；讓大家了解元素進行浮動之後會出現的問題，以及css消除浮動的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、為什麼會出現浮動？

浮動（float）產生的最根本的原因是為了實現文字環繞效果；後來有人發現用它來做佈局挺不錯的，可以彌補傳統佈局上的一些不足，挺方便的。

二、為什麼要清除浮動，css清理浮動有什麼作用？

浮動（float）可以控制浮動框左右移動，直到遇到另一個浮動框或遇到它外緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響區塊級元素的佈局，只會影響內聯元素佈局。此時文檔流程中的普通串流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現「高度塌陷」： css清理浮動有什麼作用？清理浮動的方法（介紹）

上圖中父元素撐開的高度是padding帶來的效果，父元素沒有設置高度。

在父元素沒有設定高度的情況下：

如果父元素裡的子元素沒有設定浮動，那麼父元素的高也會自動被撐開的，出現高度值；
如果父元素裡的子元素設定了浮動，那麼父元素的高就不會自動被撐開的，也就沒有高度值。

顯然這樣設定浮動後出現了一些問題，例如：

父元素的margin受到影響，無法實現上下左右居中，
若沒有為父元素設定高度，浮動後父元素的高度沒有被撐開，那麼父元素就不會在顯示幕上顯示。

實例說明（背景色）

#沒有清除浮動：

css清理浮動有什麼作用？清理浮動的方法（介紹）

清除浮動後：

css清理浮動有什麼作用？清理浮動的方法（介紹）

三、怎麼清除浮動

#下面介紹css清除浮動的幾個方法（實現上圖效果）：

1.使用帶有clear屬性的空元素

使用空標籤清除浮動：在需要清除浮動的父級元素內部的所有浮動元素後面加上一個空標籤（理論上可以是任何標籤，但常用

和

）清除浮動，並為其定義CSS代碼clear:both。

程式碼實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
			}
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
			.clear{
				clear:both;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
			<div class="clear"></div>
		</div>
	</body>
</html>

優點：簡單，程式碼少，瀏覽器相容性好。

缺點：需要增加大量無語意的html元素，程式碼不夠優雅，後期不容易維護。

2.使用CSS的overflow屬性

使用overflow清除浮動：只需在需要清除浮動的元素中定義CSS代碼overflow:auto或overflow:hidden即可。

程式碼實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
				overflow:hidden
			}
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

優點：不存在結構和語意化問題，程式碼量極少

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素

3.使用CSS的:after偽元素

對父元素使用:after偽元素，設定display:table

display:table 讓產生的元素以區塊級表格顯示，並佔滿剩餘空間。

透過content: " "產生內容當作最後一個元素，至於content裡面是什麼都是可以的，CSS經典的是 content:"."，有些版本可能content裡面內容為空。

程式碼實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				width: 500px;
				margin: 50px auto;
				background-color: #CCCCCC;
				*zoom: 1;
			}
			.demo:after { 
				content: " ";
				display: table; 
				clear: both;  
			}  
			.left{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #21B4BB;
			}
			.right{
				width: 100px;
				height: 50px;
				float: right;
				background-color: #21B4BB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

缺點：適合現代瀏覽器，不支援IE6/7，*zoom: 1就是為了相容IE6/7

以上是css清理浮動有什麼作用？清理浮動的方法（介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn