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

这里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>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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

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

给父元素设置一个overflow:hidden;就可以了。

祝学习愉快!

  • 视频内,给子标签加上margin:20px; 然后子元素的$().position();变成Object{top:-20px,left:0} 老师说是什么“BRC导致的高度塌陷?”然后给父元素加上overflow:hidden;就好了。 为什么?
    2018-01-20 12:52:04
  • 老师说的是BFC,不是BRC,BFC是解决高度塌陷的,你可以网上查阅下。
    2018-01-20 13:56:36
  • 设置的是子元素盒子margin-top的值,为什么父元素盒子也会往下走margin-top的值?
    2018-11-30 22:32:51
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师