資訊專欄INFORMATION COLUMN
摘要：但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
所謂高度塌陷就是在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁(yè)面布局混亂。
例如：
"utf-8" />
?
解決高度塌陷問(wèn)題
方法一:
根據(jù)W3C的標(biāo)準(zhǔn)，在頁(yè)面中元素都一個(gè)隱含的屬性叫做Block Formatting Context,簡(jiǎn)稱BFC，該屬性可以設(shè)置打開(kāi)或者關(guān)閉，默認(rèn)是關(guān)閉的。
當(dāng)開(kāi)啟元素的BFC以后，元素將會(huì)具有如下的特性：
1.父元素的垂直外邊距不會(huì)和子元素重疊
2.開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
3.開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素
如何開(kāi)啟元素的BFC:
1.設(shè)置元素浮動(dòng)
—使用這種方式開(kāi)啟，雖然可以撐開(kāi)父元素，但是會(huì)導(dǎo)致父元素的寬度丟失，而且使用這種方式也會(huì)導(dǎo)致下邊的元素上移，不能解決問(wèn)題
2.設(shè)置元素絕對(duì)定位
3.設(shè)置元素為inline-block
- 可以解決問(wèn)題，但是會(huì)導(dǎo)致寬度丟失，不推薦使用這種方式
4.將元素的overflow設(shè)置為一個(gè)非visible的值
推薦方式：將overflow設(shè)置為hidden是副作用最小的開(kāi)啟BFC的方式。
注意：但是在IE6及以下的瀏覽器中并不支持BFC，所以使用這種方式不能兼容IE6。在IE6中雖然沒(méi)有BFC，但是具有另一個(gè)隱含的屬性叫做hasLayout，該屬性的作用和BFC類似，所在IE6瀏覽器可以通過(guò)開(kāi)hasLayout來(lái)解決該問(wèn)題，開(kāi)啟方式很多，我們直接使用一種副作用最小的：直接將元素的zoom設(shè)置為1即可
1.zoom表示放大的意思，后邊跟著一個(gè)數(shù)值，寫(xiě)幾就將元素放大幾倍
2.zoom:1表示不放大元素，但是通過(guò)該樣式可以開(kāi)啟hasLayout
3.zoom這個(gè)樣式，只在IE中支持，其他瀏覽器都不支持
例如：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1{
border: 10px red solid;
zoom:1;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
style>
head>
<body>
<div class="box1">
<div class="box2">div>
div>
<div class="box3">div>
body>
html>
方法二：
可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div，由于這個(gè)div并沒(méi)有浮動(dòng)，所以他是可以撐開(kāi)父元素的高度的，然后在對(duì)其進(jìn)行清除浮動(dòng)，這樣可以通過(guò)這個(gè)空白的div來(lái)?yè)伍_(kāi)父元素的高度，基本沒(méi)有副作用。使用這種方式雖然可以解決問(wèn)題，但是會(huì)在頁(yè)面中添加多余的結(jié)構(gòu)。
例如：
<head> <meta charset="UTF-8"> <title>title> <style type="text/css"> .box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } .clear{ clear: both; } style> head> <body> <div class="box1"> <div class="box2">div> <div class="clear">div>
div> body> html>
方法三：
可以通過(guò)after偽類向元素的最后添加一個(gè)空白的塊元素，然后對(duì)其清除浮動(dòng)，這樣做和添加一個(gè)div的原理一樣，可以達(dá)到一個(gè)相同的效果，而且不會(huì)在頁(yè)面中添加多余的div，這是我們最推薦使用的方式，幾乎沒(méi)有副作用，在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來(lái)處理
例如:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clearfix:after{
/*添加一個(gè)內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個(gè)塊元素*/
display: block;
/*清除兩側(cè)的浮動(dòng)*/
clear: both;
}
.clearfix{
zoom:1;
}
style>
head>
<body>
<div class="box1">
<div class="box2">div>
">
div>
body>
html>
?
?
?
?
特此聲明：如需轉(zhuǎn)載請(qǐng)注明出處，如有疑問(wèn)請(qǐng)及時(shí)提出以便于改正，如有侵權(quán)，聯(lián)系刪除，謝謝
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1534.html
摘要：但是會(huì)導(dǎo)致寬度丟失，不推薦使用這種方式將元素的設(shè)置非值解決父元素高度塌陷副作用最小的兼容性在中沒(méi)有但是具有另一個(gè)隱含的屬性叫該屬性的作用和類似，所在瀏覽器通過(guò)開(kāi)啟來(lái)解決問(wèn)題。高度塌陷的問(wèn)題：?? ?當(dāng)開(kāi)啟元素的BFC以后，元素將會(huì)有如下的特性?? ?1 父元素的垂直外邊距不會(huì)和子元素重疊?? ?開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋?? ?開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素?? ?如何開(kāi)啟元...
摘要：講清除浮動(dòng)屬性值清除左右元素浮動(dòng)對(duì)本元素造成的影響。代碼導(dǎo)航條解決高度塌陷問(wèn)題最終版利用一個(gè)占位，清除浮動(dòng)對(duì)它的影響從而實(shí)現(xiàn)解決高度塌陷的問(wèn)題，但是此方法會(huì)在頁(yè)面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。 63講 導(dǎo)航條css樣式 導(dǎo)航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個(gè)前的大圓點(diǎn)*/ list...
摘要：講清除浮動(dòng)屬性值清除左右元素浮動(dòng)對(duì)本元素造成的影響。代碼導(dǎo)航條解決高度塌陷問(wèn)題最終版利用一個(gè)占位，清除浮動(dòng)對(duì)它的影響從而實(shí)現(xiàn)解決高度塌陷的問(wèn)題，但是此方法會(huì)在頁(yè)面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。 63講 導(dǎo)航條css樣式 導(dǎo)航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個(gè)前的大圓點(diǎn)*/ list...
摘要：可以得出產(chǎn)生高度塌陷的原因在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。目錄 CSS-高度塌陷問(wèn)題 表現(xiàn) 產(chǎn)生的原因 高度塌陷的解決辦法： ...
摘要：容易混淆的是，效果幾乎一樣，但是并沒(méi)有脫離文檔流，并且元素中間有空隙。講高度塌陷問(wèn)題在文檔流中，默認(rèn)父元素不設(shè)置高度是被子元素?fù)伍_(kāi)，當(dāng)子元素脫離了文檔流，父元素會(huì)出現(xiàn)高度塌陷的問(wèn)題。 58-59講 浮動(dòng) 三個(gè)塊級(jí)div水平方向排列： 不脫離文檔流 display：inline-block可以把它們?nèi)齻€(gè)變?yōu)樾袃?nèi)塊元素,但是書(shū)寫(xiě)方式必須是這也每個(gè)div必須緊鄰，中間不能留有空隙 下面這...
閱讀 1746·2021-09-28 09:35
閱讀 1188·2019-08-30 15:54
閱讀 1706·2019-08-30 15:44
閱讀 3413·2019-08-30 14:09
閱讀 558·2019-08-29 14:05
閱讀 2730·2019-08-28 17:53
閱讀 2056·2019-08-26 13:41
閱讀 1768·2019-08-26 13:26
