BFC:块级格式化上下文

IFC:行内格式化上下文

实例如下：

<div class="out" style="background: red;">
<div class="in" style="height: 100px; margin-top: 10px; background: green;"></div>
</div>

此时，out和in高度都是100px。

异常情况：但out被in挡住，且顶部有10px间隙。

解决方案：我们给out添加overflow:hidden，out被挡住和10px空白都没有了，但out高度也变为了110px。

刚刚的这种异常情况称为边距重叠，BFC是块级边距重叠，IFC是行内元素的边距重叠。

以上为父子元素的边距重叠，还有两种情况是兄弟元素的边距重叠，空元素的边距重叠。

1. 兄弟元素的边距重叠。兄弟元素相交的位置，margin会取较大值作为两者的边距。

2.空元素的边距问题。空元素设置了不同的上下边距时，会取较大值做他的最终边距。

css在什么情况下会创建出BFC？

float值不是none时
position值不是relative或static时
display为table,table-cell
overflow值为hidden,auto时

css盒模型：BFC、IFC边距重叠解决方案的更多相关文章

  1. CSS盒模型以及如何解决边距重叠问题

    盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别 ...

  2. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  3. 【CSS】309- 复习 CSS盒模型

    点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...

  4. 深入理解CSS盒模型

    如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种 ...

  5. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

  6. 深入理解CSS盒模型【转载】

    下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基 ...

  7. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  8. 前端面试必备技巧（二）css盒模型及BFC

    CSS盒模型 基本概念:标准模型+IE模型及区别 CSS如何设置这两种模型? JS如何设置获取盒模型对应的宽和高? 实例题(根据盒模型解释边距重叠) BFC边距重叠解决方案 (1)BFC的基本概念:b ...

  9. 十分钟复习CSS盒模型与BFC

    css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...

随机推荐

  1. Windows Phone - 按钮/button 控件

    System.Windows.Controls.Button   button控件一.button控件的各种样式的展示可以通过 …… 来给控件定义公共的样式调用样式的方法:在Button控件上添加样式 ...

  2. jquery插件生成简单二维码

    除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...

  3. JS中常见问题

    //s金额 n保留几位小数 默认保留两位小数 s代表金额,n代表保留的小数位数 function formatMoney(s, n) { n = n > 0 && n <= ...

  4. redis启动出错 Creating Server TCP listening socket 127.0.0.1:6379: bind: No error解决办法

    windows下安装Redis第一次启动报错: [2368] 21 Apr 02:57:05.611 # Creating Server TCP listening socket 127.0.0.1: ...

  5. js 获取 下拉框的值

    //错误 console.log($("#DictID").select.val()); //错误 console.log($("#DictID").selec ...

  6. spring cloud(一) eureka

    spring cloud 注册中心 eureka 搭建过程 1.搭建eureka-server 服务端 1.1. 新建boot工程 pom引入依赖 <dependency> <gro ...

  7. bzoj 1191: [HNOI2006]超级英雄Hero 网络流_残量网络

    题目描述: 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的 多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回答一道题后 ...

  8. nodejs 使用crypto实现sha256\md5加密

    var crypto = require('crypto'); var hash = crypto.createHash('sha256');// sha256或者md5 hash.update('1 ...

  9. 40 最小的K个数（时间效率）

    题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,.   测试用例: 功能测试(输入的数组中有相同的数字:输入的数组中 ...

  10. 64 求1+2+3+...+n（发散思维能力 ）

    题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 解题思路: 1)利用&&的短 ...