关于子元素的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;

        }