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. @property修饰符

    @property修饰符 修饰是否生成getter方法的 readonly 只生成setter方法,不生成getter方法 readwrite 既生成getter 又生成setter方法(默认) @p ...

  2. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  3. 基于redis5的redis cluster部署

    一.环境规划 #准备六台主机,地址如下 10.0.0.8 ---> master1 10.0.0.18 ---> master2 10.0.0.28 ---> master3 10. ...

  4. 编译安装http2.4

    编译安装http2.4 1.安装相关依赖包 [root@centos7 ~]yum -y install gcc make 2.下载http2.4包,并解压 [root@centos7 ~]#tar ...

  5. 简述CGI与FASTCGI区别

    CGI和FASTCGI都是服务器端与客户端进行交互的常见方式. CGI处理客户端请求,会生成一个子进程来专门调用外部程序来处理客户端请求,处理完成,子进程会随之关闭 FAST处理客户端请求时.服务器端 ...

  6. Ubuntu18修改/迁移mysql5.7数据存放路径

    1.停止mysql服务 sudo service mysql stop 2.修改mysql配置文件,一般是 /etc/mysql/my.cnf,或者/etc/mysql/mysql.conf.d/my ...

  7. Note -「多项式」基础模板（FFT/NTT/多模 NTT）光速入门

      进阶篇戳这里. 目录 何为「多项式」 基本概念 系数表示法 & 点值表示法 傅里叶(Fourier)变换 概述 前置知识 - 复数 单位根 快速傅里叶正变换(FFT) 快速傅里叶逆变换(I ...

  8. 第二章 初始MySQL 语法

    1.使用MySQL的优势 运行速度快.MySQL体积小,命令执行的速度快: 使用成本低.MySQL是开源的. 容易使用. 可移植性强.MySQL能够运行于多种系统平台之上,windows,linux, ...

  9. 初识面向对象（Day17-Day18）

    人狗大战的游戏 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人拿棍 ...

  10. Prometheus之Dockerfile编写、镜像构建、容器启动

    目录 从官方镜像启动:prom/prometheus 官方Dockerfile分析 编写自己的Dockerfile 构建镜像: 启动容器: 从官方镜像启动:prom/prometheus 拉取镜像 $ ...