在两个盒子嵌套时，内部的盒子设置的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. Openresty安装及使用配置（OPENRESTY+NGINX）

    Openresty 简介 Openresty是一个基于NGINX和Lua的高性能Web平台,内部有大量的Lua库和第三方模块,能够很方便的搭建处理高并发,扩展性高的Web平台和动态网关,充分利用 Ng ...

  2. node安装express-generator脚手架

    参考网址:https://www.jianshu.com/p/b555ba6f4067 全局安装: npm install express-generator -g 创建项目pro_test expr ...

  3. Python装饰器的进阶

    带参数的装饰器 示例一:Python自带的装饰器函数 from functools import wraps import time def Time(func1): @wraps(func1) de ...

  4. SpringCloud笔记三：Eureka服务注册与发现

    目录 什么是Eureka? Eureka注册的三大步 第一步,引用Maven 第二步,配置yml 第三步,开启Eureka注解 新建Eureka子项目 把provider子项目变成服务端 Eureka ...

  5. [物理学与PDEs]第2章第4节 激波 4.2 熵条件

    1.  R.H. 条件仅仅给出了越过激波时的能量守恒定律, 即热力学第一定律; 但客观的流体运动过程还需满足热力学第二定律, 即越过激波是个熵增过程: $$\bex S_1>S_0\quad(0 ...

  6. luogu P5300 [GXOI/GZOI2019]与或和

    传送门 题目涉及按位与以及按位或运算,所以可以拆位考虑,枚举某个二进制位,然后某个位置如果那个数的第\(i\)位是\(0\)就放\(0\),否则放\(1\),这一位的贡献就是位运算后值为\(1\)的子 ...

  7. ado.net 之 oracle 数据库

    ado.net 操作oracle 数据库 跟操作mssql 的原来基本一样.只是使用不同的命名空间而已.下面举几个例子: 一. C#读取oracle数据库的表格 ///ado.net 读取table ...

  8. Selective Search for Object Recognition（理解）

    0 - 背景 在目标检测任务中,我们希望输入一副图像,输出目标所在的位置以及目标的类别.最常用的算法是滑动窗口方法,但滑动窗口其实相当于穷举图像中的所有子图像,其效率低且精度也受限.该论文提出一种新的 ...

  9. 「luogu1417」烹调方案

    题目链接 :https://www.luogu.org/problemnew/show/P1417 直接背包 ->  30' 考虑直接背包的问题:在DP时第i种食材比第j种食材更优,但由于j&l ...

  10. 使用fiddler模拟重复请求接口

    使用fiddler模拟重复请求接口 重复请求某个接口,比如评论一条,这样点击多次就可以造多个评论数据