高度塌陷问题
2015-11-01 13:09
302 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
margin:20px;
background:lightgreen;
border: 2px solid lightgreen;
/*display:inline-block;*/
/*overflow:hidden;*/
/*float: left;*/如果选择这种方法,一定要在该元素的下个元素添加clear:both,
/*position: absolute;*/
}
ul{
overflow:hidden;
margin:10px;
background:lightblue;
width:100px;
height:200px;
float: left;
}
li{
margin:25px;
}
</style>
</head>
<body class="claro">
<div class="first">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<!--<div style="clear:both"></div>-->
</body>
</html>
父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零,前提是它只包含浮动元素,解决高度塌陷的问题很简单,可以浮动父级元素、清除法等等,均可实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
margin:20px;
background:lightgreen;
border: 2px solid lightgreen;
/*display:inline-block;*/
/*overflow:hidden;*/
/*float: left;*/如果选择这种方法,一定要在该元素的下个元素添加clear:both,
/*position: absolute;*/
}
ul{
overflow:hidden;
margin:10px;
background:lightblue;
width:100px;
height:200px;
float: left;
}
li{
margin:25px;
}
</style>
</head>
<body class="claro">
<div class="first">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<!--<div style="clear:both"></div>-->
</body>
</html>
父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零,前提是它只包含浮动元素,解决高度塌陷的问题很简单,可以浮动父级元素、清除法等等,均可实现
相关文章推荐
- 视图、索引、存储过程优缺点
- Emacs常用快捷键
- 无线客户端框架设计(2):项目结构的设计(iOS篇)
- 统计n个数中的1的个数
- hdoj The MAX 2803 (简单计算)
- 无线客户端框架设计(3):基类的设计(iOS篇)
- Myself
- 位运算与ASCII码表
- Qt开发环境安装与软件下载
- Java链接到MySQL数据库
- 无线客户端框架设计(4):自定义生命周期的设计(iOS篇)
- java分层架构概念
- 线程池模型:领导者/追随者 半同步/半异步模型
- 无线客户端框架设计(5):调用MobileAPI的设计(iOS篇)
- 无线客户端框架设计(5.1):将JSON映射为实体对象(iOS篇)
- 随机数生成器,完成后打开文件。
- jquery中ajax的dataType属性包括哪几项
- Android网络开发之OkHttp--基本用法POST
- crazyflie control system about PID
- python3 抓取网页资源的 N 种方法