css解決塌陷問題

• • 高度塌陷
  • BFC
  • clear
  • after偽類
  • 外邊距重疊問題

高度塌陷

高度塌陷的問題

在浮動布局中，父元素的高度默認是被子元素撐開的，當子元素浮動后，其會完全脫離文檔流，子元素從文檔流中脫離，將無法撐起父元素的高度，導致父元素的高度丟失。父元素高度丟失以后，其下的元素會自動上移，導致頁面的混亂。

BFC

BFC（Block Formation Context）：塊級格式化環境。
BFC是CSS中一個隱含的屬性，可以為一個元素開啟BFC，開啟BFC后，該元素會變成一個獨立的布局區域。

元素開啟BFC后的特點：

• 元素不會被浮動元素所覆蓋
• 子元素和父元素外邊距不會重疊
• 元素可以包含浮動的子元素

通過一些特殊方式開啟元素的BFC

設置元素的浮動

區別：

使用父元素設置float后，高度不會丟失，但是寬度會丟失

設置display為inline-block，變為行內塊元素

問題：會丟失寬度

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

例如：

overflow：scroll（或auto、hidden）

常用的方式為為overflow：hidden開啟BFC（不會丟失寬度和高度）

優勢：不會丟失寬度和高度

clear

如果我們不希望某個元素因為其他元素浮動的影響而改變位置，可以通過clear屬性來清楚浮動元素對當前元素所產生的影響

原理

設置clear以后，瀏覽器會自動為元素添加一個上外邊距，以使其位置不受其他元素的影響。

clear可選值

• left：清楚左側浮動元素對當前元素的影響
• right：清楚右側元素對當前元素的影響
• both：清楚兩側中影響最大的那側

例如：設置clear與不設置clear的區別

例二：
css代碼：

.box1{width: 200px;height: 200px;background-color: aqua;float: left;} .box3{width: 200px;height: 200px;background-color: orange;clear: both;} .box2{width: 400px;height: 400px;background-color: black;float: right; }

html代碼：

<div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div>

效果：

after偽類

利用after偽類，對塊元素的最后編寫一個空文本，再使用clear來占滿整個塊元素。
例如：

外邊距重疊問題

clearfix

clearfix可以同時解決高度塌陷和外邊距重疊問題，遇到這些問題時，直接使用clearfix類即可

clearfix代碼：

.clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; }

例如：

總結

以上是生活随笔為你收集整理的css解决塌陷问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。