本文介绍了HTML布局中遇到的一个常见问题：当子元素设置margin时，导致父元素位置跟随移动。问题源于外边距塌陷现象。文章详细分析了原因，并提供了四种解决方案，包括添加padding或border、将父元素转换为BFC元素等。重点讨论了使用overflow：hidden和设置绝对定位来避免外边距塌陷的方法。
问题描述
在未给父元素设置固定高度时，会出现跟随子元素的margin-top一起移动的现象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.father{
width:100%;
height:100%;
background-color: red;
}
.child{
width: 300px;
height:200px;
background-color: skyblue;
margin:150px auto;
}
</style>
<body>
<div class="father">
<div class="child">
</div>
</div>
</body>
</html>
当我给子元素加了一个margin：150px auto 的时候就会出现父元素和子元素一起下移的现象
原因分析：
外边距塌陷问题
当子元素寻找不到父元素的border或者padding时 就会出现子元素和父元素外边距合并的问题
解决方案：
1.通过添加padding和border来解决
2，将父元素转换为BFC元素，这样子盒子就不会影响到父盒子
（1）通过overflow：hidden 来将父元素转换为bfc元素
（2）设置position:absolute
（3）通过浮动来触发，这样会出现父元素没有高度的情况。
（4）设置为行内块元素，这样父元素的宽度就会失效
综上，采用overflow：hidden或者设置绝对定位来解决问题
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
