频道栏目
首页 > 程序开发 > web前端 > HTML 5 > 正文
h5解决高度塌陷问题的方法
2018-07-11 16:17:02         来源: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;
}

/*
* 解决高度塌陷方案二:
* 可以直接在高度塌陷的父元素的最后,添加一个空白的p,
* 由于这个p并没有浮动,所以他是可以撑开父元素的高度的,
* 然后在对其进行清除浮动,这样可以通过这个空白的p来撑开父元素的高度,
* 基本没有副作用
* 
* 使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。
*/
.clear{
clear: both;
}

</style>
</head>
<body>
<p class="box1">
<p class="box2"></p>
<p class="clear"></p>
</p>
</body>
</html>
点击复制链接 与好友分享!回本站首页
上一篇:h5关于清除浮动的操作学习讲解
下一篇:最后一页
相关文章
图文推荐
文章
推荐
点击排行

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

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