码迷,mamicode.com
首页 > 其他好文 > 详细

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

时间:2017-05-29 11:07:55      阅读:3587      评论:0      收藏:0      [点我收藏+]

标签:内容   学习笔记   margin   hid   hit   需要   gre   笔记   contain   

以下是个人学习笔记,仅供学习参考。

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溢出和元素浮动对父元素高度影响解决方案

标签:内容   学习笔记   margin   hid   hit   需要   gre   笔记   contain   

原文地址:http://www.cnblogs.com/JaggerG/p/6917256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!