解決高度塌陷問題

所謂高度塌陷就是在文件流中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設定浮動以後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂。

例如：


class="
box1
">
class="
box2
">
class="
box3
">

解決高度塌陷問題

方法一:　　

根據w3c的標準，在頁面中元素都乙個隱含的屬性叫做block formatting context,簡稱bfc，該屬性可以設定開啟或者關閉，預設是關閉的。

當開啟元素的bfc以後，元素將會具有如下的特性：

1.父元素的垂直外邊距不會和子元素重疊

2.開啟bfc的元素不會被浮動元素所覆蓋

3.開啟bfc的元素可以包含浮動的子元素

如何開啟元素的bfc:

1.設定元素浮動

—使用這種方式開啟，雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且使用這種方式也會導致下邊的元素上移，不能解決問題

2.設定元素絕對定位

3.設定元素為inline-block

- 可以解決問題，但是會導致寬度丟失，不推薦使用這種方式

4.將元素的overflow設定為乙個非visible的值

注意：但是在ie6及以下的瀏覽器中並不支援bfc，所以使用這種方式不能相容ie6。在ie6中雖然沒有bfc，但是具有另乙個隱含的屬性叫做haslayout，該屬性的作用和bfc類似，所在ie6瀏覽器可以通過開haslayout來解決該問題，開啟方式很多，我們直接使用一種***最小的：直接將元素的zoom設定為1即可

1.zoom表示放大的意思，後邊跟著乙個數值，寫幾就將元素放大幾倍

2.zoom:1表示不放大元素，但是通過該樣式可以開啟haslayout

3.zoom這個樣式，只在ie中支援，其他瀏覽器都不支援

例如：


doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>
title
>
<
style 
type
="text/css"
>
.box1
.box2
.box3
style
>
head
>
<
body
>
<
div 
class
="box1"
>
<
div 
class
="box2"
>
div>
div>
<
div 
class
="box3"
>
div>
body
>
html
>

方法二：

可以直接在高度塌陷的父元素的最後，新增乙個空白的div，由於這個div並沒有浮動，所以他是可以撐開父元素的高度的，然後在對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有***。使用這種方式雖然可以解決問題，但是會在頁面中新增多餘的結構。

例如：


<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
style 
type
="text/css"
>
.box1
.box2
.clear
style
>
head
>
<
body
>
<
div 
class
="box1"
>
<
div 
class
="box2"
>
div>
<
div 
class
="clear"
>
div>
div>
body
>
html
>

方法三：

可以通過after偽類向元素的最後新增乙個空白的塊元素，然後對其清除浮動，這樣做和新增乙個div的原理一樣，可以達到乙個相同的效果，而且不會在頁面中新增多餘的div，這是我們最推薦使用的方式，幾乎沒有***，在ie6中不支援after偽類,所以在ie6中還需要使用haslayout來處理

例如:


doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
style 
type
="text/css"
>
.box1
.box2
.clearfix:after
.clearfix
style
>
head
>
<
body
>
<
div 
class
="box1"
>
<
div 
class
="box2"
>
div>
clearfix">


div>
body
>
html
>

解決高度塌陷問題

解決高度塌陷問題

高度塌陷問題

解決高度塌陷問題的方法

相關推薦