问题描述
在未给父元素设置固定高度时,会出现跟随子元素的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或者设置绝对定位来解决问题