摘要:加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。清除左右兩邊浮動(dòng)??梢姸仍O(shè)為隱藏。注意它和是有區(qū)別的。仍然占據(jù)空間,只是看不到而已行高為高度為字體大小為這是針對(duì)于的,因?yàn)椴恢С謧晤悾@個(gè)神奇的讓的元素可以清除浮動(dòng)來包裹內(nèi)部元素。
??.clearfix:after {? 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)來包裹內(nèi)部元素。*/
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/116517.html
摘要:深入布局定位與浮動(dòng)在知識(shí)體系中,除了選擇器,樣式屬性等基礎(chǔ)知識(shí)外,布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。定位后,原來在文檔流中占據(jù)的位置,會(huì)被其他元素所占據(jù)。清除浮動(dòng)的特殊應(yīng)用清除浮動(dòng)可以解決父元素高度塌陷問題。? 深入css布局(2) — 定位與浮動(dòng) ? ???? 在css知識(shí)體系中,除了css選擇器,樣式屬性等基礎(chǔ)知識(shí)外,css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來深...
摘要:清除浮動(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)象...
摘要:還有幾種亂七八糟的清除浮動(dòng)方法,但是缺點(diǎn)多,故不提起,了解可參考浮動(dòng)的目的:把多個(gè)盒子放在一行上清除浮動(dòng)的目的:解決父盒子高度為0的問題清除浮動(dòng),也稱閉合浮動(dòng)注:本文不兼容IE6 未清除浮動(dòng)實(shí)現(xiàn)情況: 清除后: 原代碼: DOCTYPE html> 清除浮動(dòng) .content{ width:960px; margin:100px auto; border: 1px solid ...
摘要:如果要解決可以參考前面的辦法。例如父元素處于絕對(duì)定位與上一個(gè)方法同理,由于絕對(duì)定位已脫離正常文檔流,故出現(xiàn)相同情況,解決辦法依舊可以使用以上辦法結(jié)合,靈活多變。 額外標(biāo)簽法 使用:after 偽元素 給父元素定高 利用overflow:hidden;屬性 父元素浮動(dòng) 父元素處于絕對(duì)定位 在開發(fā)網(wǎng)頁的時(shí)候經(jīng)常需要用到各種浮動(dòng),此時(shí)便需要及時(shí)的清除浮動(dòng),否則將會(huì)導(dǎo)致布局出現(xiàn)問題 引出問...
摘要:一浮動(dòng)的概念浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 一、浮動(dòng)的概念 浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 二、浮動(dòng)的影響 1. 浮動(dòng)會(huì)導(dǎo)致父元...
閱讀 3027·2023-04-26 00:32
閱讀 511·2019-08-30 15:52
閱讀 2117·2019-08-30 15:52
閱讀 3363·2019-08-30 15:44
閱讀 3291·2019-08-30 14:09
閱讀 1424·2019-08-29 15:15
閱讀 3404·2019-08-28 18:12
閱讀 1088·2019-08-26 13:55