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. Python—列表元组和字典

    Python-列表元组和字典 列表 元组 字典 列表: 列表是Python中的一种数据结构,他可以存储不同类型的数据.尽量存储同一种类型 列表索引是从0开始的,我们可以通过索引来访问列表的值. 列表的 ...

  2. 网络层主要协议与arp欺骗

    网络层主要协议与arp欺骗 目录 网络层主要协议与arp欺骗 一.网络层(Network Layer) 1.网络层的功能 2.IP数据报(IP Datagram) 二.网络层的主要协议 1.ICMP协 ...

  3. Ubuntu18修改系统时间

    1. 运行 tzselect 依次选择 Asia -> China -> Beijing Time 2. 复制文件到 /etc 下 sudo cp /usr/share/zoneinfo/ ...

  4. 12、Linux基础--挂载磁盘步骤、流处理工具awk（正则 比较 逻辑 算数表达式 流程控制）

    笔记 1.晨考 1.用两种方法,实现将文件中的以# 开头的行把# 去掉 sed -r 's/^#//g' /etc/fstab cat /etc/fstab | tr -d '^#' 2.将文件中的H ...

  5. 五、MyBatis缓存初体验

    缓存就是内存中的数据,常常来自对数据库查询结果的保存,使用缓存, 我们可以避免频繁的与数据库进行交互, 进而提高响应速度. 一级缓存初体验(session,默认打开) 同一查询执行两次以上:selec ...

  6. java实现 TCP通信

    //服务端import com.hl.bluetooth.util.CRC16; import com.hl.bluetooth.util.FrameCheckFailedException; imp ...

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

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

  8. 【C#表达式树 五】工厂模式创建表达式树节点

    常量 1.值常量  (p)=>100+88+p ParameterExpression par = Expression.Parameter(typeof(int), "p" ...

  9. 开发Windows程序的三种方式

    软件开发方式一共有三种:SDK方式.MFC开发方式.托管环境的开发都是基于消息的开发 SDK方式 原装api的调用SDK方式使用C语言和Windows应用程序编程接口(Windows API)来开发W ...

  10. Ng ML笔记

    目录 一.线性回归 1,假设函数.代价函数,梯度下降 2,特征处理 3,代价函数和学习速率 4,特征和多项式回归 5,正规方程 二.逻辑回归(Logistic Regression,LR) 1,假设函 ...