<style>
#dd {
padding: 20px;
overflow: hidden;
border: 1px solid black
}
#d1 {
float: left;
width: 300px;
background-color: red;
padding-bottom: 200px;
margin-bottom: -200px;
border: 1px solid yellow
}
#d2 {
float: left;
width: 500px;
background-color: blue;
padding-bottom: 200px;
margin-bottom: -200px;
border: 1px solid yellow
}
</style>
<div id="dd">
<div id="d1">好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上
</div>
<div id="d2">Superxuyuey</div>
</div>
overflow:hidden; 可以将超出边框的内容隐藏,而不是内边界
因为父元素的height等于子元素的7个高度值相加,即:
margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom = 父元素height
对于子元素来说padding-bottom+margin-bottom=0,所以子元素的height就等于父元素的height
但是可以看到子元素的背景超出了父元素的内容区,这是因为背景颜色默认是加在元素边框以内的区域,区域外margin的区域颜色为透明,显示父元素的背景颜色