关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
Posted JaggerGuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案相关的知识，希望对你有一定的参考价值。
以下是个人学习笔记，仅供学习参考。
1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题。
在给没有margin-top-border父元素中的子元素添加margin-top时，发现没有直接表现出来，而是作用到父元素身上，就会导致子元素的margin-top溢出。
条件：
1、父元素没有上边框
2、为第一个子元素设置上外边距时
解决方案：
1、为父元素增加上边框
弊端：父元素会变高
2、通过为父元素设置上内边距来取代子元素的上外边距
弊端：也会增加父元素的高度
3、在父元素中，增加一个空 <table>元素
弊端：页面中多一个空元素而已
4.使用内容生成：before，完美！
<!-- 解决上边距溢出问题:before使用代码 -->
html部分：
<div id="container">
<div id="item"></div>
</div>
css部分：
#item{
width:200px;
height:200px;
background:pink;
/*子元素的上外边距作用到父元素*/
margin-top:20px;
}
#container:before{
content:"";
display:table;
}
2.关于浮动元素父元素高的问题：
条件：
父元素中有子元素float的话，可能就会影响父元素的高度，从而影响布局；
解决方案：
1.直接给父元素定高；
弊端：必须知道父元素的高；
2. 使用overflow属性值为hidden解决；
弊端：会隐藏溢出的内容，（当需要隐藏时使用，按需使用）
3.在父元素中最后面未知添加一个块级元素或table属性元素，并加clear属性值为both；
弊端：页面中多了一个空元素（影响不大，算是很nice）
4.使用内容生成：after解决，完美！
/*解决浮动高问题*/
html部分：
<!-- 解决浮动元素高的问题 -->
<div id="df">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
css部分：
/*解决浮动高问题*/
#df{
background:yellow;
}
#d1,#d2,#d3{
width:200px;
height:200px;
}
#d1{
background:red;
float:left;
}
#d2{
background:green;
float:left;
}
#d3{
background:blue;
float:left;
}
#df:after{
content:"";
display:block;
clear:both;
}
以上是关于关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案的主要内容，如果未能解决你的问题，请参考以下文章
CSS父元素没有设置高度，元素浮动后父元素无法跟随子元素的高度-_-