外边距溢出
描述
- 父元素没有上边框(border-top)或者没有上内边距(padding-top)
- 给子元素设置上外边距,会作用到父元素上
<style type="text/css">
#parent{
width: 300px;
height: 300px;
background-color: gray;
}
#child{
width: 150px;
height: 150px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
解决方法
-
给父元素加上边框。弊端:增加了父元素实际占据高度
-
给父元素添加上内边距。弊端:增加了父元素实际占据高度
-
给父元素设置
overflow:hidden/auto
。弊端:元素如果想溢出显示,就冲突了 -
把子元素变成行内块元素
display:inline-block
。弊端:改变了子元素的显示模式 -
在该子元素的前面,添加一个空的元素,比如
<table>\</table>
弊端:添加无意义标签,结构化差 -
利用父元素的伪类
before
添加一个空table
元素(推荐使用)#parent::before { content:""; display:table; }
高度坍塌
描述
父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度坍塌
解决方法
-
w3c推荐做法,在浮动元素末尾添加一个空标签,在空标签里添加
sytle = "clear:both"
- 优点:通俗易懂,书写方便
- 缺点:添加无意义标签,结构化差
-
给父元素添加
overflow:hidden|auto|scroll
- 优点:代码整洁,无需添加无意义标签
- 缺点:内容增多时容易造成不会自动换行导致内容被隐藏,无法显示溢出的元素
-
为父元素增加伪元素
:after
方式(推荐使用).clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{*zoom:1;} /*ie67专有清除浮动属性浏览器兼容*/
- 优点:符合闭合浮动的思想 结构语义化正确
- 缺点:由于IE6-7不支持
:after
, 使用zoom:1 触发hasLayout
-
使用双伪元素清除浮动(推荐使用)
.clearfix:before,clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; }
- 优点:代码更简洁
- 缺点:由于IE6-7不支持
:after
, 使用zoom:1 触发hasLayout