1.bfc block format context

2.如何触发一个盒子的bfc

　　position:absolute;

　　display: inline-block

　　float:left/right;

　　overflow:hidden;

<html>

<head>

    <link rel="stylesheet" href="cs2.css">

</head>

<body>

    <div class="wapper">

        <div class="content"></div>

    </div>

</body>

</html>

2.css 代码

*{

    margin: 0;

    padding: 0;

}

.wapper{

    width: 100px;

    height: 100px;

    margin-left: 100px;

    margin-top: 100px;

    background-color: black;

}

    /* overflow: hidden; */

    /* position:absolute; */

    /* display: inline-block */

　　

    /* border-top: 1px solid red; */

.content{

    margin-left: 50px;

    margin-top: 50px;

    width: 50px;

    height: 50px;

    background-color: green;

}

　3. margin 合并问题

<html>

<head>

    <link rel="stylesheet" href="cs2.css">

</head>

<body>

    <!-- margin 合并问题 -->

    <div class="demo1">1</div>

    <div class="wapper">

        <div class="demo2">2</div>

    </div>

</body>

</html>

3. css

*{

    margin: 0;

    padding: 0;

}

.demo1{

    background-color: red;

    margin-bottom: 100px;

}

.demo2{

    background-color: green;

    margin-top: 100px;

}

/* margin 合并问题 */

.wapper{

    overflow: hidden;

}

4.结论 margin问题一般不解决，直接设置margin-bottom:200px;

margin 塌陷bug 触发bfc的更多相关文章

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

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

  2. 盒模型 bug 与触发 bfc

     一.margin合并 css经典bug  两个块级元素 分别设置 margin-bottom 和 margin-top 并不能达到预期效果 <style> .up{ width: 200 ...

  3. margin塌陷与BFC总结

    只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...

  4. bug:margin塌陷

    margin塌陷:两个嵌套的div,内部div的margin-top失效,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值. 弥补方法: 1 ...

  5. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  6. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  8. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  9. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

随机推荐

  1. Solution -「UR #21」「UOJ #632」挑战最大团

    \(\mathcal{Description}\)   Link.   对于简单无向图 \(G=(V,E)\),定义它是"优美"的,当且仅当 \[\forall\{a,b,c,d\ ...

  2. 使用docker部署awx-1.7.1.0（ansible图形化界面）

    文章目录 关于环境 下载awx 下载安装所需依赖 安装docker-compose 配置inventory文件 出现的报错 TASK [local_docker : Run migrations in ...

  3. MySQL基于GTID的组复制（MGR）

    环境准备 IP 主机名 操作系统 192.168.131.129 mgr-node1 CentOS7.6 192.168.131.130 mgr-node2 CentOS7.6 192.168.131 ...

  4. 多端开发之uniapp开发app

    最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯 ...

  5. 使用动态时间规整 (DTW) 解决时间序列相似性度量及河流上下游污染浓度相似性识别分析

    时间序列相似性度量方法 时间序列相似性度量常用方法为欧氏距离ED(Euclidean distance)和动态时间规整DTW(Dynamic Time Warping).总体被分为两类: 锁步度量(l ...

  6. MybatisPlus字段自动填充配置

    实体类 @ApiModelProperty(value = "创建时间") @TableField(fill = FieldFill.INSERT) private Date gm ...

  7. vmstat监视内存的使用情况

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可实时动态监视操作系统的虚拟内存.进程.CPU活动. vmstat的语法 vmstat [-V] [-n] [ ...

  8. MYSQL文件复制及备份

    周末研究了下mysql的数据结构,记录下: 场景1:当从一台电脑的mysql的data中复制数据库的文件夹到另一台电脑上时会发现 表不存在,函数等也不存在 方法:1.需要将data根目录下的ibdat ...

  9. can_has_stdio?

    得到一个用±<>这样符号组成的五角星,结合题目stdio,估计是c语言编译后的文件 查到BrianFuck语言,找个在线编译器或者找到编译码(c++)得到flag 在线编译网站 brain ...

  10. 浅谈：redis的主从复制 + 哨兵模式

    浅谈:redis的主从复制 + 哨兵模式 主从模式 ​ 在谈论redis的主从复制之前,我们先回想下mysql的主从搭建过程,第一步呢首先要在主库服务器中修改my.cnf,开启一下bin_log功能, ...