<!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. 机械手相机9点坐标标定-基于C#+EmguCV

    很多初学者,都对标定概念模糊不清,分不清坐标系之间的关系,搞不清相机标定和机械手相机标定有什么关系,想当初自己也是一个人摸索了很久,本文将尽量给大家解释. 我们通常所说的相机标定分为两种,一种是相机参 ...

  2. Vue.js框架的基础指令

    Vue.js 渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体. 三大主流前端框 ...

  3. jquery click事件失效

    除了最基本的语法错误,还可能是因为,元素根本点击不到. z-index:99;

  4. （转）python基础之迭代器协议和生成器（一）

    一 递归和迭代 二 什么是迭代器协议 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代 (只能往后走不能往前 ...

  5. 解决多个window.onscroll覆盖的问题

    项目中有好几处都有用到监听页面滚动window.onscroll这个函数,结果出现了后者覆盖前者的问题. 最后是通过addEventListener解决了这种共存问题.       ⚠️该处代码thi ...

  6. Android Telephony分析(五) ---- TelephonyRegistry详解

    本文紧接着上一篇文章<Android Telephony分析(四) —- TelephonyManager详解 >的1.4小节.从TelephonyRegistry的大部分方法中: 可以看 ...

  7. java执行spark查询hbase的jar包出现错误提示：ob aborted due to stage failure: Master removed our application: FAILED

    执行java调用scala 打包后的jar时候出现异常 /14 23:57:08 WARN TaskSchedulerImpl: Initial job has not accepted any re ...

  8. 使Excel中单元格内英文为Arial Narrow 中文为宋体显示打印

    因为在对数据表进行排版格式整理的时候,发现Arial Narrow字体是不支持中文的,所以中文默认为宋体,但是显示出来却不是宋体,需要双击单元格中文才显示为宋体,这样打印出来才为宋体 但是如果有很多单 ...

  9. Jmeter---参数化之用户参数

    总结: 参数化几次就要设置几个线程,执行的时候,是按顺序执行,下面的请求也会跟着请求

  10. C 常见字符串操作函数

    头文件 <string.h> 1. char *strstr(const char *str1, const char *str2);      判断str2是否为str1的子串  //s ...