<!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. 1.RabbitMQ介绍

    MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消息传递指的是程序之间 ...

  2. 检测API函数的InlineHook

    BOOL GetProcHookStatus(LPCSTR lpModuleName, LPCSTR lpProcName) { HMODULE hModule = GetModuleHandleA( ...

  3. ionic：ionic 教程

    ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framew ...

  4. JS Date Math Number

    Date对象 Date对象和String对象不太一样,定义了一字符串,其实就是一个String对象,就可以直接调用属性和方法. Date对象的使用,必须使用new关键字来创建,否则,无法调用Date对 ...

  5. 剑指offer——06二叉树的下一个节点

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针.   题目的意思是,在一颗二叉树的中序遍历中,给出其中一 ...

  6. 2016CCPC杭州现场赛 B-Bomb /// tarjan缩点

    题目大意: 给定n个爆破点的信息 x y r w 表示爆破点位置为 (x,y) 爆破范围是以位置为圆心 半径为r的圆 引爆这个点的代价为w 引爆某个点时 其他位置在该爆破范围内的爆破点也会被引爆 求引 ...

  7. 【POJ】2387 Til the Cows Come Home

    题目链接:http://poj.org/problem?id=2387 题意:求从1到n的最短路 题解:板子题.spfa. 代码: #include<iostream> #include& ...

  8. 再次封装ajax函数，统一入口

    根据API写网页的时候,每个页面都需要ajax请求,每次都写一大堆请求,配置什么的太麻烦,于是打算封装一个ajax函数,统一调用: 开始时是使用return返回ajax,如下: function cr ...

  9. Elasticsearch.net一些开发笔记

    .net下开发es半年多了,留下些笔记 //https://www.elastic.co/guide/cn/elasticsearch/guide/current/combining-filters. ...

  10. 关于soapui如何做安全测试

    1.首先安装soapui5.1.2 第一步:运行SoapUI-Pro-x32-5.1.2_576024.exe文件,按照步骤安装成功: 第二步:拷贝Protection-4.6.jar到soapui安 ...