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

h5解決高度塌陷問題的方法

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

h5解決高度塌陷問題的方法

<!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;
}

/*
* 解決高度塌陷方案二:
* 可以直接在高度塌陷的父元素的最后,添加一個空白的div,
* 由于這個div并沒有浮動,所以他是可以撐開父元素的高度的,
* 然后在對其進行清除浮動,這樣可以通過這個空白的div來撐開父元素的高度,
* 基本沒有副作用
* 
* 使用這種方式雖然可以解決問題,但是會在頁面中添加多余的結構。
*/
.clear{
clear: both;
}

</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

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

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

免费的黄色网站