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. JAVA面向对象特征详解

    1. 封装 封装性的产生目的:保护某些属性和方法不被外部所看见. 封装的实现:为属性和方法进行封装是通过关键字private声明的:实现该属性的set和get方法,为外部所访问 该公开的公开,该私有的 ...

  2. k8s补充

    k8s补充 容器云发展及主要内容 1.云计算,交付标准(iaas--openstack) 国内:阿里云一华为云(振兴杯)百度云(私有云) 国外:AWS 2.平台即服务(PAAS) 例如:新浪云(号称免 ...

  3. 深入Java微服务之网关系列1：什么是网关

    ​ 前言 近来,在想着重构一个新的产品.准备采用微服务的技术解决方案,来搭建基础设施框架.网关,是一个必不可少的组件.那么,网关到底是什么? 其又有什么特点或者特性,成为微服务必不可少的组件呢?今天, ...

  4. 【BZOJ3545】Peaks(Kruskal重构树 主席树)

    题目链接 大意 给出有\(N\)个点\(M\)条边的一张图,其中每个点都有一个High值,每条边都有一个Hard值. 再给出\(Q\)个询问:\(v\) \(x\) \(k\) 每次询问查询从点\(v ...

  5. 蟒蛇书学习笔记——Chapter 09 Section 01 创建和使用类

    9.1 创建和使用类 9.1.1 创建Dog类   根据Dog类创建的每个实例都将存储名字和年龄,我们赋予了每条小狗蹲下(sit( ))和打滚(roll_over( ))的能力: class Dog: ...

  6. MybatisPlus二级缓存

    一.序言 本文承接[Mybatis缓存体系探究],提供基于MybatisPlus技术可用于生产环境下的二级缓存解决方案. 1.前置条件 掌握MyBatis二级缓存的原理 有关MyBatis缓存原理内容 ...

  7. erange.heetian.com 回显任意账号

      首先获取你想登录ID的REG标识符,例如合天课程专家  获取标识符ba84d3c3-a4a1-4cd2-a00d-2f5722ee86a2 一般用户前缀为REG,这个肯定是管理员之类的= =.. ...

  8. suse 12 二进制部署 Kubernetets 1.19.7 - 第13章 - 部署metrics-server插件

    文章目录 1.13.0.创建metrics-server证书和私钥 1.13.1.生成metrics-server证书和私钥 1.13.2.开启kube-apiserver聚合配置 1.13.3.分发 ...

  9. Redis 源码简洁剖析 16 - 客户端

    整体概述 客户端属性 套接字描述符 标志 输入缓冲区 命名及命令参数 命令的实现函数 输出缓冲区 客户端的创建与关闭 创建普通客户端 关闭普通客户端 参考链接 Redis 源码简洁剖析系列 整体概述 ...

  10. Python小游戏之 - 飞机大战 !

    用Python写的"飞机大战"小游戏 源代码如下: # coding=utf-8 import random import os import pygame # 用一个常量来存储屏 ...