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. rsync 远程同步部署——上下行同步

    rsync 远程同步部署--上下行同步 1.rsync (Remote Sync,远程同步) : 是一个开源的快速备份工具,可以在不同主机之间镜像同步整个目录树,支持增量备份,并保持链接和权限,且采用 ...

  2. 网管必须必须知道的知识！ARP攻击与欺骗的原理！

    ARP攻击与ARP欺骗原理及应用 1.ARP概述以及攻击原理 2.ARP欺骗原理 3.ARP故障处理 1.什么是ARP协议?将一个已知的IP地址解析成MAC地址.无论是ARP攻击还是ARP欺骗,它们都 ...

  3. MacOS常用命令行工具

    转自:https://blog.csdn.net/u014102846/article/details/77964493 https://ohmyz.sh/ https://github.com/ro ...

  4. java中LinkedList ArrayList 数组 HashSet 存储数据测试

    话不多少,直接上代码 import java.text.SimpleDateFormat;import java.util.*; public class testList { public stat ...

  5. ESXI系统从0搭建流程

    ESXI系统从0搭建流程 简单介绍 简单介绍:项目中使用到了这个系统,我自己不会搭建,但是请教别人之后自己成功搭建出来了此系统.所以在此记录一下搭建流程,希望能够帮助"零"小白. ...

  6. JVM学习——内存空间（学习过程）

    JVM--内存空间 关于内存的内容,内存的划分.JVM1.7 -> 1.8的变化比较大 JVM指令执行的时候,是基于栈的操作.每一个方法执行的时候,都会有一个属于自己的栈帧的数据结构.栈的深度, ...

  7. webshell安全教程防止服务器被破解

    直接上传取得webshell 因过滤上传文件不严,导致用户能够直接上传webshell到网站恣意可写目录中,然后拿到网站的办理员操控权限. 2 增加修正上传类型 现在很多脚本程序上传模块不是只允许上传 ...

  8. python中time模块的调用及使用

    1 import time #通常import语句会写到代码的开头 2 3 print('------------------------') 4 print('------------------- ...

  9. [Golang]一些书城项目中出现错误的原因和解决办法（一）

    跟着B站尚硅谷的GoWeb教程写书城项目,整理一下自己写的时候出现的错误和解决办法. 错误一:cartItem中只能加入一种书,SQL语句没有问题,但是购物车中的总金额和总数量正确: 原因:cartI ...

  10. 华为eNSP的防火墙（USG6000V）如何使用Web界面登入

    文章目录 华为eNSP的防火墙(USG6000V)如何使用Web界面登入 前言 一.使用步骤 1.导入USG6000V的镜像包 总结 前言 在华为的eNSP的模拟器上如何使用Web界面去管理与使用模拟 ...