在两个盒子嵌套时，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

（1）外部盒子设置一个边框

（2）外部盒子设置overflow:hidden

（3）使用伪元素类：

.clearfix:before{

content:””;

display:table;

}

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin-top塌陷</title>

    <style type="text/css">

        .clearfix:before{

            content:"";

            display:table;

        }  /* 第三种解决塌陷的方法，相当于第一种加了边框 第三种方法是最常用的方法 */

        .con{

            width: 300px;

            height: 300px;

            background-color: gold;

            /*border:1px solid black;  /* 第一种解决塌陷的方法 */

            /*overflow:hidden;  /* 第二种解决塌陷的方法 *!*/

        }

        .box{

            width: 200px;

            height: 100px;

            background-color: green;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div class="con clearfix">

        <div class="box"></div>

    </div>

</body>

</html>

页面显示效果：

css Margin-top塌陷，解决方法的更多相关文章

  1. IE CSS Bugs 列表和解决方法

    我们在开发中我们常会在IE中遇到很多莫名的bug,尤其是老态龙钟的IE6浏览器.为了提高我们的开发效率,需要经常总结,整理工作中遇到的问题.我们在网络上找到的IE Bugs 资料是零散的.不过,在老外 ...

  2. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  3. IE6/7/8 CSS兼容性问题和解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

  4. IE6,IE7浏览器下 margin 无效的解决方法

    今天有时间,所以特意做了一个测试. 复制代码 代码如下: <style type="text/css"> .test-1,.test-2{border:5px soli ...

  5. CSS布局自适应高度解决方法

    这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...

  6. ASP.NET中使用 Response.Write("<script>alert('****');</script>");后CSS界面发生变化的解决方法 （经验证）

    在后台使用Response.Write("<script>alert('Hello World');</script>);弹出alert窗口后发现网页的界面和原来CS ...

  7. asp.net net::ERR_ABORTED 500 (Internal Server Error) 无法加载JS CSS等文件的解决方法

    网站换服务器,部署上去后打开首页,js .css等文件始终无法加载,经过排查,问题出现在web.config文件中. <defaultDocument> <files> < ...

  8. win7(iis7)无法加载运行CSS和图片的解决方法

    今天刚刚在公司的电脑安装了window7并配置了iis7,打开网站户发现结构混乱,图片不显示,但是内容显示完全没有问题,也没有出错. 一开始以为是和IIS6的MIME一样,没有添加到相应项目的原因,但 ...

  9. CSS兼容性解决方法!important的IE7，Firefox问题

    转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...

  10. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

随机推荐

  1. Numpy系列（四）- 索引和切片

    Python 中原生的数组就支持使用方括号([])进行索引和切片操作,Numpy 自然不会放过这个强大的特性.  单个元素索引 1-D数组的单元素索引是人们期望的.它的工作原理与其他标准Python序 ...

  2. 使用 gzexe 快速加密解密文件内容

    使用 gzexe 快速加密解密文件内容 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用sshpass工具编写远程管理脚本 1>.安装依赖包 [root@node101 ...

  3. Docker：dockerfile构建php项目 [八]

    一.把项目封装成docker镜像的步骤 把项目封装成docker镜像的步骤: 1.先运行一个基础容器,手动制作docker镜像 2.编写dockerfile,构建镜像 3.测试运行 二.dockerf ...

  4. phpstorm快捷键大全

    前言:这段时间换了编辑器,所以挺多命令也改变了 转载来自:https://www.jianshu.com/p/ffb24d61000d?utm_campaign=maleskine&utm_c ...

  5. JavaScript 函数递归

    递归函数 递归函数是在一个函数通过名字调用自身的情况下构成的 项目中例如树状结构渲染,对象深复制,等很多方面都会使用到递归函数 function factorial(num){ if (num < ...

  6. [物理学与PDEs]第1章习题11 各向同性导体中电荷分布的指数衰减

    在各向同性的导体中, Ohm 定律具有如下形式: $$\bex {\bf j}=\sigma {\bf E}, \eex$$ 其中 $\sigma$ 称为电导率. 试证在真空中导体的连续性方程为 $$ ...

  7. [物理学与PDEs]第1章第5节 Maxwell 方程组的数学结构, 电磁场的波动性 5.3 电磁场的波动性, 自由电磁波

    1. 由 Maxwell 方程组易知 $$\beex \bea \cfrac{1}{c^2}\cfrac{\p^2{\bf E} }{\p t^2}-\lap{\bf E}  &=-\sex{ ...

  8. 消息队列MQ对比

    1.ActiveMQ 是Apache下的一个子项目. 类似于ZeroMQ,它能够以代理人和点对点的技术实现队列.同时类似于RabbitMQ,它少量代码就可以高效地实现高级应用场景.RabbitMQ.Z ...

  9. [译]Ocelot - Claims Transformation

    原文 用户授权后才能使用此功能. 用户获得授权后claims将被发送到claims transformation中间件.用户授权后,我们首先调用claims to headers middleware ...

  10. tf.py_func

    在 faster  rcnn的tensorflow 实现中看到这个函数 rois,rpn_scores=tf.py_func(proposal_layer,[rpn_cls_prob,rpn_bbox ...