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. hibernate中的一级缓存与闪照区

    首先Hibernate中的一级缓存默认是打开的,并且范围从session创建到session关闭,存储的数据必须是持久态的数据. 1 //从session创建开始,一级缓存也跟着创建 2 Sessio ...

  2. High ASCII字符从bat文件到dos控制台的转化问题

    背景是这样的,由于项目需要,需要用silent install的方式安装一些程序,而安装参数中有一些High ASCII字符,如ùé.通过代码,使用默认编码(ANSI,说明下,我用的是法语的系统)创建 ...

  3. play的action链（一个action跳转到另一个action，类似于重定向）

    在play中没有Servlet API forward 的等价物.每一个HTTP request只能调用一个action.如果我们需要调用另一个,必须通过重定向,让浏览器访问另一个URL来访问它.这样 ...

  4. 红色小圆点+数字的badge自定义小方法 by Nicky.Tsui

    效果如图. 实现方法比较简单,在view上增加一个label label设置: 1 badgeLabel = [[UILabel alloc]initWithFrame:CGRectMake(CGRe ...

  5. 06.python语法入门--与用户交互、运算符

    与用户交互 输入 input    # python2与python3的区别        '''python3'''    # 将获取到的用户输入赋值给变量名res    res = input(' ...

  6. 我们一起来学grep

    文章目录 grep 介绍 grep 命令格式 grep 命令选项 grep 实例 查找指定进程 查找指定进程个数 从文件中读取关键词进行搜索 从多个文件中查找关键字 输出以u开头的行 输出非u开头的行 ...

  7. 【C#基础概念】Ineterface 接口的设计原则

    接口设计方式 自顶向下 (如图所示),自底向上(发现类需要结构了就声明一个接口). 接口的作用 用来解耦.继承 接口的本质

  8. 【C#基础概念】编程语言：弱类型、强类型、动态类型、静态类型

    一.看图区别编程语言 一般来讲,看第一个图就够了 这图是引用的,有错误,Python是强类型,但是图片中却归为弱类型了. 业界堆静态和动态的区分达到共识. 但是堆强类型和弱类型语言还未达成共识.我个人 ...

  9. C# 逆变(Contravariance)/协变(Covariance) - 个人的理解

    逆变(Contravariance)/协变(Covariance) 1. 基本概念 官方: 协变和逆变都是术语,前者指能够使用比原始指定的派生类型的派生程度更大(更具体的)的类型,后者指能够使用比原始 ...

  10. Winfrom中关于toolStrip工具栏中按钮背景的设置

    在ToolStrip中可以存放很多种控件,一般来说,主要使用的是Button和DropDownButton,通常情况下,Button需要设置图片和文字,网上找了很多个方法都不太靠谱,自己试验了下,下面 ...