摘要:如果一個(gè)元素的右側(cè)有一浮動(dòng)對(duì)象,而這個(gè)元素設(shè)置了不允許右邊有浮動(dòng)對(duì)象,即,則這個(gè)元素會(huì)自動(dòng)下移一格,達(dá)到本元素右邊沒(méi)有浮動(dòng)對(duì)象的目的。
清除浮動(dòng):
在非IE瀏覽器下,當(dāng)容器的高度為auto,且容器的內(nèi)容中有浮動(dòng)(float為left或right)的元素,在這種情況下,容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度,使得內(nèi)容溢出到容器外面而影響(甚至破壞)布局的現(xiàn)象。即父級(jí)對(duì)象盒子無(wú)法被撐開,這個(gè)現(xiàn)象叫浮動(dòng)溢出,為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理,就叫CSS清除浮動(dòng)。
?
clear語(yǔ)法:
clear : none | left | right | both
取值:
none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
left : 不允許左邊有浮動(dòng)對(duì)象
right : 不允許右邊有浮動(dòng)對(duì)象
both : 不允許有浮動(dòng)對(duì)象
但是需要注意的是:clear屬性只會(huì)對(duì)自身起作用,而不會(huì)影響其他元素。如果一個(gè)元素的右側(cè)有一浮動(dòng)對(duì)象,而這個(gè)元素設(shè)置了不允許右邊有浮動(dòng)對(duì)象,即clear:right,則這個(gè)元素會(huì)自動(dòng)下移一格,達(dá)到本元素右邊沒(méi)有浮動(dòng)對(duì)象的目的。
?
方法一:
.clearfix:after { <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容; content: "."; <----內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫。 display: block; <----加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。 clear: both; <----清除左右兩邊浮動(dòng)。 visibility: hidden; <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間,只是看不到而已; line-height: 0; <----行高為0; height: 0; <----高度為0; font-size:0; <----字體大小為0; } .clearfix { *zoom:1;} <----這是針對(duì)于IE6的,因?yàn)镮E6不支持:after偽類,這個(gè)神奇的zoom:1讓IE6的元素可以清除浮動(dòng)來(lái)包裹內(nèi)部元素。
整段代碼就相當(dāng)于在浮動(dòng)元素后面跟了個(gè)寬高為0的空div,然后設(shè)定它c(diǎn)lear:both來(lái)達(dá)到清除浮動(dòng)的效果。?
之所以用它,是因?yàn)?,你不必在html文件中寫入大量無(wú)意義的空標(biāo)簽,又能清除浮動(dòng)。?
那么問(wèn)題來(lái)了,如何使用上面這段代碼呢?
只要寫一個(gè).clearfix就行了,然后在需要清浮動(dòng)的元素中 添加clearfix類名就好了。?
如:
class
=
"head clearfix"
>
?
方法二:
直接在后面加上一個(gè)取消了浮動(dòng)的空div:
?
方法三:
?直接在父級(jí)元素加上overflow:hidden屬性。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/1459.html
摘要:還有幾種亂七八糟的清除浮動(dòng)方法,但是缺點(diǎn)多,故不提起,了解可參考浮動(dòng)的目的:把多個(gè)盒子放在一行上清除浮動(dòng)的目的:解決父盒子高度為0的問(wèn)題清除浮動(dòng),也稱閉合浮動(dòng)注:本文不兼容IE6 未清除浮動(dòng)實(shí)現(xiàn)情況: 清除后: 原代碼: DOCTYPE html> 清除浮動(dòng) .content{ width:960px; margin:100px auto; border: 1px solid ...
摘要:清除浮動(dòng)方法方法一使用帶屬性的空元素在浮動(dòng)元素后使用一個(gè)空元素如,并在中賦予屬性即可清理浮動(dòng)。 什么是CSS清除浮動(dòng)? 在非IE瀏覽器(如Firefox)下,當(dāng)容器的高度為auto,且容器的內(nèi)容中有浮動(dòng)(float為left或right)的元素,在這種情況下,容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度,使得內(nèi)容溢出到容器外面而影響(甚至破壞)布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出,為了防止這個(gè)現(xiàn)象...
摘要:為了實(shí)現(xiàn)這個(gè)效果,我們需要清除浮動(dòng)。元素被向下移動(dòng)用于清除之前的左右浮動(dòng)。塊格式化上下文對(duì)浮動(dòng)定位與清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)內(nèi)的元素。且為了不影響接下來(lái)的文檔標(biāo)準(zhǔn)流,往往也要收尾做出清除浮動(dòng)。以下從浮動(dòng)到BFC的段落 摘自MDN 網(wǎng)絡(luò)開發(fā)者float 浮動(dòng)float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置,允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁(yè)的正常流...
摘要:深入布局定位與浮動(dòng)在知識(shí)體系中,除了選擇器,樣式屬性等基礎(chǔ)知識(shí)外,布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。定位后,原來(lái)在文檔流中占據(jù)的位置,會(huì)被其他元素所占據(jù)。清除浮動(dòng)的特殊應(yīng)用清除浮動(dòng)可以解決父元素高度塌陷問(wèn)題。? 深入css布局(2) — 定位與浮動(dòng) ? ???? 在css知識(shí)體系中,除了css選擇器,樣式屬性等基礎(chǔ)知識(shí)外,css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深...
摘要:方法三據(jù)說(shuō)是最高大上的方法方法注意作用于浮動(dòng)元素的父親先說(shuō)原理這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng),他就是利用和來(lái)在元素內(nèi)部插入兩個(gè)元素塊,從面達(dá)到清除浮動(dòng)的效果。的作用是允許瀏覽器渲染它,但是不顯示出來(lái),這樣才能實(shí)現(xiàn)清楚浮動(dòng)。 一、拋一塊問(wèn)題磚(display: block)先看現(xiàn)象: showImg(https://segmentfault.com/img/bVrWvS)...
摘要:那我們舉個(gè)栗子當(dāng)先聲明一個(gè)元素向左浮動(dòng)時(shí),由于脫離文檔流,這個(gè)元素的右邊就會(huì)空出一片空間,空間的長(zhǎng)寬與浮動(dòng)元素長(zhǎng)寬相同??偨Y(jié)總結(jié)下來(lái),浮動(dòng)與清除浮動(dòng)的順序關(guān)系如下設(shè)置元素浮動(dòng),元素脫離文檔流,不計(jì)算高度。 本文主要探討兩個(gè)問(wèn)題: 為什么CSS設(shè)置浮動(dòng)會(huì)引起父元素塌陷 為什么設(shè)置clear:both能清除浮動(dòng),并撐開父元素。 起因 CSS的浮動(dòng),算是我在寫網(wǎng)頁(yè)時(shí)用的最多的屬性之一。但...
閱讀 1917·2021-09-27 14:02
閱讀 3908·2021-09-27 13:36
閱讀 1134·2019-08-30 12:46
閱讀 1926·2019-08-30 10:51
閱讀 3681·2019-08-29 17:02
閱讀 1068·2019-08-29 16:38
閱讀 1920·2019-08-29 16:37
閱讀 3216·2019-08-26 10:32