浮動高度塌陷問題 BFC

paraller 發布于2019-08-29 18:33 / 842人閱讀

摘要：容易混淆的是，效果幾乎一樣，但是并沒有脫離文檔流，并且元素中間有空隙。講高度塌陷問題在文檔流中，默認父元素不設置高度是被子元素撐開，當子元素脫離了文檔流，父元素會出現高度塌陷的問題。

58-59講浮動 三個塊級div水平方向排列： 不脫離文檔流

display：inline-block可以把它們三個變為行內塊元素,但是書寫方式必須是這也每個div必須緊鄰，中間不能留有空隙

下面這種垂直排列會留有空隙

脫離文檔流

這個就很簡單了，略。

浮動的注意事項

不管怎么浮動也逃不出如來(父級)手掌心

當前面的元素浮動后，后面沒有浮動的元素盡量往左上角跑(往上鉆)

當前面的元素沒有浮動，并且是塊級元素就會把后面的浮動元素擋住(鉆不動)

浮動會出現文字環繞的效果

在不脫離文檔流的時候塊級元素只設置一個height，默認寬度是父級的寬度。此時設置一個float脫離文檔流后寬度就是0，如果該div里面沒有任何文字內容的話，你會發現該div消失了

內聯元素脫離文檔流后和塊元素脫離文檔流后效果一樣

后面的浮動元素不會超過他上面緊鄰的浮動元素，如下圖div1 div2左浮動，div3右浮動，發現div3并沒有在div1的右邊

總結

本講要記的知識點非常多，注意脫離文檔流后寬高的變化。容易混淆的是display:inline-block，效果幾乎一樣，但是display:inline-block并沒有脫離文檔流，并且元素中間有空隙。

61-62講高度塌陷問題

在文檔流中，默認父元素不設置高度是被子元素撐開，當子元素脫離了文檔流，父元素會出現高度塌陷的問題。由于父元素塌陷，父元素后面的元素也會跟著擠上來，導致頁面布局發生了改變。

解決方案一：

給父元素設置高度，但是子元素高度變大后父元素不能自動跟著變大就會發生溢出。

什么是BFC

塊級格式化上下文 (Block Fromatting Context),在頁面的每個元素都有一個隱藏的屬性叫做"BFC"，它默認是關閉的。當它開啟后具有如下特性：

父元素的垂直方向外邊距不會和子元素外邊距重合

開啟BFC的元素不會被浮動元素所覆蓋(不會往里面鉆)

開啟BFC的父元素可以包含浮動的子元素

如何開啟BFC

設置元素浮動

設置元素絕對定位

設置元素為inline-block

將元素的overflow設為一個非visible的值

解決方案二

給父元素開啟BFC，上面的第4種方法是副作用最小的overflow:hidden或者overflow:auto

IE6解決方案

在IE6上面不知道BFC，但是與其對應的有個hasLayout，可以直接設置屬性zoom:1來解決塌陷問題，zoom是把元素放大多少倍的意思。zoom:1一般沒什么缺陷。

最后

設置為如下可以解決大部分瀏覽器高度塌陷問題：

overflow:hidden;
zoom:1;

GPU云服務器云服務器 html5浮動問題 bfc bfc布局 html浮動向上浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114410.html

浮動高度塌陷問題 BFC

摘要：容易混淆的是，效果幾乎一樣，但是并沒有脫離文檔流，并且元素中間有空隙。講高度塌陷問題在文檔流中，默認父元素不設置高度是被子元素撐開，當子元素脫離了文檔流，父元素會出現高度塌陷的問題。 58-59講浮動三個塊級div水平方向排列：不脫離文檔流 display：inline-block可以把它們三個變為行內塊元素,但是書寫方式必須是這也每個div必須緊鄰，中間不能留有空隙下面這...

_Suqin 2019-08-02 16:12 評論0 收藏0
CSS-高度塌陷問題

摘要：可以得出產生高度塌陷的原因在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。目錄 CSS-高度塌陷問題表現產生的原因高度塌陷的解決辦法： ...

Vultr 2019-04-23 11:57 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮動

摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...

yankeys 2019-08-29 15:10 評論0 收藏0
解決高度塌陷問題

摘要：但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。所謂高度塌陷就是在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致...

zhoutao 2019-04-23 13:11 評論0 收藏0
html高度塌陷問題解決

摘要：但是會導致寬度丟失，不推薦使用這種方式將元素的設置非值解決父元素高度塌陷副作用最小的兼容性在中沒有但是具有另一個隱含的屬性叫該屬性的作用和類似，所在瀏覽器通過開啟來解決問題。高度塌陷的問題：?? ?當開啟元素的BFC以后，元素將會有如下的特性?? ?1 父元素的垂直外邊距不會和子元素重疊?? ?開啟BFC的元素不會被浮動元素所覆蓋?? ?開啟BFC的元素可以包含浮動的子元素?? ?如何開啟元...

Big_fat_cat 2019-04-23 13:22 評論0 收藏0