頻道欄目
首頁 > 資訊 > HTML 5 > 正文

h5解決高度塌陷的代碼教程

18-07-11        來源:[db:作者]  
收藏   我要投稿

h5解決高度塌陷的代碼教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

.box1{
border: 10px red solid;
/*
* 根據W3C的標準,在頁面中元素都一個隱含的屬性叫做Block Formatting Context
* 簡稱BFC,該屬性可以設置打開或者關閉,默認是關閉的。
* 當開啟元素的BFC以后,元素將會具有如下的特性:
* 1.父元素的垂直外邊距不會和子元素重疊	
* 2.開啟BFC的元素不會被浮動元素所覆蓋
* 3.開啟BFC的元素可以包含浮動的子元素
* 
* 如何開啟元素的BFC
* 1.設置元素浮動
* - 使用這種方式開啟,雖然可以撐開父元素,但是會導致父元素的寬度丟失
* 而且使用這種方式也會導致下邊的元素上移,不能解決問題
* 2.設置元素絕對定位
* 3.設置元素為inline-block
* - 可以解決問題,但是會導致寬度丟失,不推薦使用這種方式
* 4.將元素的overflow設置為一個非visible的值
* 
* 推薦方式:將overflow設置為hidden是副作用最小的開啟BFC的方式。	
*/

/*overflow: hidden;*/

/*
*但是在IE6及以下的瀏覽器中并不支持BFC,所以使用這種方式不能兼容IE6。
* 在IE6中雖然沒有BFC,但是具有另一個隱含的屬性叫做hasLayout,
* 該屬性的作用和BFC類似,所在IE6瀏覽器可以通過開hasLayout來解決該問題
* 開啟方式很多,我們直接使用一種副作用最小的:
* 直接將元素的zoom設置為1即可
* 
*/

/*
* zoom表示放大的意思,后邊跟著一個數值,寫幾就將元素放大幾倍
* zoom:1表示不放大元素,但是通過該樣式可以開啟hasLayout
* zoom這個樣式,只在IE中支持,其他瀏覽器都不支持
*/
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>
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片