【css学习】内容生成解决外边距溢出和浮动高度问题

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>

**解决办法2、成功内容（国际通用的办法）** 在#d3中的第一个子元素位置处- 必须是空子元素---生成内容为空必须是table元素--显示方式为table 代码如下:

    #d3:before {
        content:"";
        display:table;
    }

2、浮动高度问题

浮动就是当前的元素脱离文本流，然后不占用页面空间，但是当要在浮动的地方添加新的元素的时候，就会被挡住，因为高度变化了！想在想让其父窗体高度恢复如下：
【css学习】内容生成解决外边距溢出和浮动高度问题

解决办法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;
    }

【css学习】内容生成解决外边距溢出和浮动高度问题

1、外边距的溢出情况

2、浮动高度问题

相关推荐