频道栏目
首页 > 资讯 > 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标签
上一篇:spring boot jar启动和关闭脚本的操作实例
下一篇:前端下拉选择框html、ts或js实例讲解
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站