資訊專欄INFORMATION COLUMN
摘要：但是會導(dǎo)致寬度丟失，不推薦使用這種方式將元素的設(shè)置非值解決父元素高度塌陷副作用最小的兼容性在中沒有但是具有另一個(gè)隱含的屬性叫該屬性的作用和類似，所在瀏覽器通過開啟來解決問題。
高度塌陷的問題：
?? ?當(dāng)開啟元素的BFC以后，元素將會有如下的特性
?? ?1 父元素的垂直外邊距不會和子元素重疊
?? ?開啟BFC的元素不會被浮動元素所覆蓋
?? ?開啟BFC的元素可以包含浮動的子元素
?? ?如何開啟元素的BFC
?? ?設(shè)置元素浮動
?? ?設(shè)置元素絕對定位
?? ?設(shè)置元素為inline-block
?? ?float:left; (不好)? 雖然可以撐開父元素 會導(dǎo)致父元素寬度丟失了
?? ?而且使用這種方式導(dǎo)致下邊的元素上移。
?? ?display:inlink-block;
?? ?布局好了，但是寬度又沒有了。但是會導(dǎo)致寬度丟失，不推薦使用這種方式
?? ?4 將元素的overflow? 設(shè)置非visible值
?? ?overflow:visible
?? ?overflow:auto;? 解決父元素高度塌陷 副作用最小的
?? ??? ??? ?hidden;
兼容性
?在IE6中沒有BFC, 但是具有另一個(gè)隱含的屬性叫hasLayout.
?該屬性的作用和BFC類似，所在IE6瀏覽器通過開啟hasLayout來解決問題。
?方式：
??? ?元素的zoom設(shè)置為1即可
??? ?zoom:1
??? ?在 IE6中如果為一個(gè)元素指定了一個(gè)寬度，則會默認(rèn)開啟一個(gè)
??? ?hasLayout.
clear:? both 清楚對他影響最大的那個(gè)元素的浮動
?
解決高度塌陷的方案二
??? ?可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div
??? ?由于這個(gè)div并沒有浮動，他是可以撐開父元素高度的
??? ?然后對其進(jìn)行清除浮動，這樣可以通過這個(gè)空白的div來撐開父元素的高度，基本沒有副作用
??? ?雖然可以解決問題啊，但是在頁面中添加多余的結(jié)構(gòu)。
?? ?**********************************?? ?==> ?? ?通過after偽類 設(shè)置為塊級元素 清除兩邊浮動 解決父類塌陷的問題
??? ?通過after偽類，選中box1的后邊
??? ?.box1:after{
??? ??? ?content:"";
??? ??? ?display:block;
??? ??? ?//清除兩側(cè)的浮動
??? ??? ?clear:both;
??? ?}
??? ?IE6不支持偽類。? zoom:1;
??? ?.clearfix:after{
??? ??? ?/*添加一個(gè)內(nèi)容*/
??? ??? ?content:"";
??? ??? ?/*轉(zhuǎn)換為一個(gè)塊元素*/
??? ??? ?display:block;
??? ??? ?/*清除兩側(cè)的浮動*/
??? ??? ?clear:both;
??? ?}
??? ?/*在IE6中不支持after偽類，
??? ?所以在IE6中還需要使用hasLayout來處理*/
??? ?.clearfix{
??? ??? ?zoom:1;
??? ?}
IE6中如果上面的是內(nèi)聯(lián)元素?? ?也是浮不上去的?
終極版：
//經(jīng)過修改后的clearfix是一個(gè)多功能的
//既可以解決高度塌陷，又可以確保父元素
和子元素的垂直外邊距重疊
.clearfix:before,
.clearfix:after{
?? ?content:"";
?? ?display:table;
?? ?clear:both;
}
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1793.html
摘要：可以得出產(chǎn)生高度塌陷的原因在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動以后，子元素會完全脫離文檔流，此時(shí)將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。目錄 CSS-高度塌陷問題 表現(xiàn) 產(chǎn)生的原因 高度塌陷的解決辦法： ...
摘要：但是當(dāng)為子元素設(shè)置浮動以后，子元素會完全脫離文檔流，此時(shí)將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。所謂高度塌陷就是在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動以后，子元素會完全脫離文檔流，此時(shí)將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。 由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導(dǎo)致...
摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動屬性，則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時(shí)了，但是對于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...
摘要：合并的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...
摘要：合并的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...
閱讀 2457·2019-08-30 15:53
閱讀 2572·2019-08-29 13:11
閱讀 2653·2019-08-29 12:45
閱讀 3486·2019-08-29 12:41
閱讀 2326·2019-08-26 10:14
閱讀 2154·2019-08-23 14:39
閱讀 2314·2019-08-23 12:38
閱讀 3378·2019-08-23 12:04
