版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jerry11112/article/details/86560499
1、外边距的溢出情况
在某些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上！
问题视图：
（1）d3是d2的父元素，左边的是问题视图，我的目的是实现右边的效果，想让d2在其父元素的中间，而不让其父元素有影响
上边是问题，接下来解决办法
解决办法1、在父元素的第一个子元素位置处，增加一个空
<style>
#d1, #d3 {
width: 200px;
height: 200px;
}
#d1 {
background: yellow;
}
#d3 {
background: red;
/*border-top:1px solid transparent;*/
}
#d2 {
width: 100px;
height: 100px;
background: orange;
margin-top: 50px;
}
</style>
<body>
<div id="d1"></div>
<div id="d3">
<table> //加一个table解决了
</table>
<div id="d2"></div>
</div>
#d3:before {
content:"";
display:table;
}
2、浮动高度问题
浮动就是当前的元素脱离文本流，然后不占用页面空间，但是当要在浮动的地方添加新的元素的时候，就会被挡住，因为高度变化了！想在想让其父窗体高度恢复如下：
解决办法1：
在父元素中，追加空子元素，并设置其clear:both
<style>
#parent {
border:2px solid #000;
}
#d1, #d2 {
background-color:red;
width:200px;
height:200px;
float:left;
}
</style>
<body>
<div id="parent">
<div id="d1"></div>
<div id="d2"></div>
<div style="clear:both;"></div> //在父元素中，追加空子元素，并设置其clear:both
</div>
</body>
解决办法2：内容生成（国际主流的解决此问题方式）
向parent后增加一个空的，块级的子元素，并设置其clear为both
#parent:after {
content:"";
display:block;
clear:both;
}