首页 > 程序开发 > web前端 > HTML 5 >

h5解决高度塌陷问题的方法

2018-07-11

h5解决高度塌陷问题的方法。

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>
相关文章
最新文章
热点推荐