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. SqlServer与MySql语法比较

    1.复制表(包括表结构.表数据) SqlServer: Select * into user_copy from user MySql: CREATE TABLE user_copy LIKE use ...

  2. MeayunDB学习笔记(一) MeayunDB介绍及安装

    系列目录   MeayunDB介绍-高性能分布式内存数据库 MeayunDB学习笔记(一)MeayunDB介绍及安装 MeayunDB学习笔记(二)批量导入数据 MeayunDB学习笔记(三)索引应用 ...

  3. Java中的常量

    常量的概念 是指在Java程序中固定不变的数据.我们可以理解为是一种特殊的变量,它的值被设定后,在程序运行过程中不允许改变. 常量的分类 整数常量:  所有的整数   例如 100 -100 123 ...

  4. git基础讲解

    idea :https://blog.csdn.net/autfish/article/details/52513465 eclipse:https://blog.csdn.net/yang57266 ...

  5. codeforces 789 A. Anastasia and pebbles

    链接 A. Anastasia and pebbles 题意 这个人有两个口袋,有n种类型的鹅卵石,每种鹅卵石有wi个,每次可以放同一种最多k个,每次不能把不同类型的鹅卵石放进同一个口袋,但是她可以同 ...

  6. 《Python数据分析与挖掘实战》-第四章-数据预处理

    点我看原版

  7. WTM

    WTM的由来 WalkingTec.Mvvm框架(简称WTM)最早开发与2013年,基于Asp.net MVC3 和 最早的Entity Framework, 当初主要是为了解决公司内部开发效率低,代 ...

  8. 莫烦大大TensorFlow学习笔记（8）----优化器

    一.TensorFlow中的优化器 tf.train.GradientDescentOptimizer:梯度下降算法 tf.train.AdadeltaOptimizer tf.train.Adagr ...

  9. Django:Admin，Cookie，Session

    一. Admin的配置 1.Admin基础设置 admin是django强大功能之一,它能够从数据库中读取数据,呈现在页面中,进行管理.默认情况下,它的功能已经非常强大,如果你不需要复杂的功能,它已经 ...

  10. JavaScript 三要素

    一个完整的JavaScript 实现由3部分组成: ECMACcript ECMAScript 规定了这门语言的下列组成部分: 语法 类型 语句 关键字.保留字 操作符 对象为什么要使用DOM?   ...