<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{margin:0px; padding:0px;}

            .box1{

                width: 300px;

                height: 300px;

                background-color: red

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                margin-top: 100px;

            }

        </style>

    </head>

    <body>

        <div class="box1 ">

            <div class="box2"></div>

        </div>

    </body>

</html>

当把子元素margin-top:100 时，其父元素会跟着一样改变

解决方法

用css解决

.clearfix:before,

            .clearfix:after{

                content: "";

                display: table;

                clear: both;

            }

            .clearfix{

                zoom: ;

            }

形成以下完全代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{margin:0px; padding:0px;}

            .box1{

                width: 300px;

                height: 300px;

                background-color: red

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                margin-top: 100px;

            }

            .clearfix:before,

            .clearfix:after{

                content: "";

                display: table;

                clear: both;

            }

            .clearfix{

                zoom: ;

            }

        </style>

    </head>

    <body>

        <div class="box1  clearfix">

            <div class="box2"></div>

        </div>

    </body>

</html>

运行后变成

HTML-完美解决父子元素的外边距重叠和高度塌陷问题的更多相关文章

  1. __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  2. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  3. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

  4. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  5. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  6. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  7. css中margin上下外边距重叠问题

    css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin, ...

  8. css外边距重叠及避免方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  9. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

随机推荐

  1. go modules学习

    https://github.com/golang/go/wiki/Modules https://tonybai.com/2018/07/15/hello-go-module/ https://ww ...

  2. django中filter()和get()的区别

    在django中,我们查询经常用的两个API中,会经常用到get()和filter()两个方法,两者的区别是什么呢? object.get()我们得到的是一个对象,如果在数据库中查不到这个对象或者查找 ...

  3. 从数组中任意取出2个数，判断他们的和是否为输入的数字sum，时间复杂度为0(n^2),空间复杂度0(1)

    从数组中任意取出2个数,判断他们的和是否为输入的数字sum,时间复杂度为0(n^2),空间复杂度0(1) 假设数据已经是排序好的 #include <stdio.h> #include & ...

  4. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  5. mycat-zookeepr--mycatweb

    ##############################mycat镜像############################## 5-1 创mycat镜像 wget http://dl.myca ...

  6. websokect的原理

    WebSocket 机制 以下简要介绍一下WebSocket的原理及运行机制. WebSocket是HTML5下一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通 ...

  7. 2018-8-10-VisualStduio-打断点调试和不打断点调试有什么区别

    title author date CreateTime categories VisualStduio 打断点调试和不打断点调试有什么区别 lindexi 2018-08-10 19:16:52 + ...

  8. 关于python merge后数据行数增加的问题

    其中一个可能的原因是 join 的 data 里面的列不唯一,也就是要匹配的表里面有些一行数据对应了被匹配表多条数据,这样出来可能会增加行数,可以再查一下被匹配表里的数据是否去重

  9. redis笔记_源码_简单动态字符串SDS

    参照:https://zcheng.ren/sourcecodeanalysis/theannotatedredissourcesds/#sds%E5%B0%8F%E7%BB%93 这里用char b ...

  10. leetcode-241-为运算表达式设置优先级*

    题目描述: 方法:分治* class Solution: def diffWaysToCompute(self, input: str) -> List[int]: if input.isdig ...