為什么需要css的清理浮動(dòng)及其作用是什么

今天就跟大家聊聊有關(guān)為什么需要css的清理浮動(dòng)及其作用是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、邳州網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、為什么會(huì)出現(xiàn)浮動(dòng)？

浮動(dòng)（float）產(chǎn)生的最根本的原因是為了實(shí)現(xiàn)文字環(huán)繞效果；后來(lái)有人發(fā)現(xiàn)用它來(lái)做布局挺不錯(cuò)的，可以彌補(bǔ)傳統(tǒng)布局上的一些不足，挺方便的。

二、為什么要清除浮動(dòng)，css清理浮動(dòng)有什么作用？

浮動(dòng)（float）可以控制浮動(dòng)框左右移動(dòng)，直到遇到另一個(gè)浮動(dòng)框或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，不會(huì)影響塊級(jí)元素的布局，只會(huì)影響內(nèi)聯(lián)元素布局。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候，此時(shí)就會(huì)出現(xiàn)“高度塌陷”：為什么需要css的清理浮動(dòng)及其作用是什么

上圖中父元素?fù)伍_的高度是padding帶來(lái)的效果，父元素沒有設(shè)置高度。

在父元素沒有設(shè)置高度的情況下：

  • 如果父元素里的子元素沒有設(shè)置浮動(dòng)，那么父元素的高也會(huì)自動(dòng)被撐開的，出現(xiàn)高度值；

  • 如果父元素里的子元素設(shè)置了浮動(dòng)，那么父元素的高就不會(huì)自動(dòng)被撐開的，也就沒有高度值。

顯然這樣設(shè)置浮動(dòng)后出現(xiàn)了一些問題，比如：

  1. 父元素的margin受到影響，無(wú)法實(shí)現(xiàn)上下左右居中，

  2. 若沒有給父元素設(shè)置高度，浮動(dòng)后父元素的高度沒有被撐開，那么父元素就不會(huì)在顯示屏上顯示。

實(shí)例說(shuō)明（背景色）

沒有清除浮動(dòng)：

為什么需要css的清理浮動(dòng)及其作用是什么

清除浮動(dòng)后：

為什么需要css的清理浮動(dòng)及其作用是什么

三、怎樣清除浮動(dòng)

下面介紹css清除浮動(dòng)的幾個(gè)方法（實(shí)現(xiàn)上圖效果）：

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

使用空標(biāo)簽清除浮動(dòng)：在需要清除浮動(dòng)的父級(jí)元素內(nèi)部的所有浮動(dòng)元素后添加一個(gè)空標(biāo)簽（理論上可以是任何標(biāo)簽，但常用<div>和<p>）清除浮動(dòng)，并為其定義CSS代碼clear:both。

代碼實(shí)例：

<!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>

優(yōu)點(diǎn)：簡(jiǎn)單，代碼少，瀏覽器兼容性好。

缺點(diǎn)：需要添加大量無(wú)語(yǔ)義的html元素，代碼不夠優(yōu)雅，后期不容易維護(hù)。

2.使用CSS的overflow屬性

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

代碼實(shí)例：

<!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>

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問題，代碼量極少

缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素

3.使用CSS的:after偽元素

對(duì)父元素使用:after偽元素，設(shè)置display:table

display:table 使生成的元素以塊級(jí)表格顯示，占滿剩余空間。

通過content: " "生成內(nèi)容作為最后一個(gè)元素，至于content里面是什么都是可以的，CSS經(jīng)典的是 content:"."，有些版本可能content里面內(nèi)容為空。

代碼實(shí)例：

<!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>

看完上述內(nèi)容，你們對(duì)為什么需要css的清理浮動(dòng)及其作用是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章題目：為什么需要css的清理浮動(dòng)及其作用是什么
網(wǎng)頁(yè)鏈接：http://muchs.cn/article16/ijsggg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、企業(yè)建站、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站