这里item没有设置float，为什么会发生高度塌陷？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
 
.box{
position: relative;
width:100px;
height: 100px;
background-color: #ccc; 
margin:20px;
}
 
.item{
position:relative;
width: 50px;
height: 50px;
background-color: red;
margin:20px;
}
</style>
</head>
<body>
<div class="box" id="demo">
<div class="item"></div>
</div>
 
 
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
var demo = $('#demo');
var element = $('.item');
 
console.log(element.offset());
console.log(element.position());
})
</script>
</body>
</html>

杰克不接客 2017-12-02

源自：jQuery DOM操作 3-11 修改元素样式(offset()、position（）、scrollLeft（）)

收起

1回答

小丸子爱吃菜 2017-12-03 12:07:46

你说的高度塌陷是什么意思？是子元素盒子的外边距margin，父元素盒子也会往下走margin-top的值。

给父元素设置一个overflow：hidden；就可以了。

祝学习愉快！

收起回答

WORLD_CONNECTED #1

视频内，给子标签加上margin:20px; 然后子元素的$().position();变成Object{top:-20px,left:0} 老师说是什么“BRC导致的高度塌陷？”然后给父元素加上overflow：hidden；就好了。为什么？

2018-01-20 12:52:04
一路电光带火花回复 WORLD_CONNECTED #2

老师说的是BFC，不是BRC，BFC是解决高度塌陷的，你可以网上查阅下。

2018-01-20 13:56:36
程序累人猿 #3

设置的是子元素盒子margin-top的值，为什么父元素盒子也会往下走margin-top的值？

2018-11-30 22:32:51