外边距溢出解决方法高度塌陷如何解决

最新推荐文章于 2025-02-20 12:32:24 发布

沉沦与遐想。

最新推荐文章于 2025-02-20 12:32:24 发布

阅读量1.7k

点赞数 7

分类专栏：网页布局文章标签： html css javascript html5 css3

本文链接：https://blog.youkuaiyun.com/qq_45466204/article/details/108355305

版权

网页布局专栏收录该内容

7 篇文章

订阅专栏

外边距溢出

描述

父元素没有上边框（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