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. root密码忘记怎么办？

    忘记root密码:按 e进入内核在按e,后面加1 .按b启动 进入命令行输入passwd,设置新的密码后exit退出即可

  2. DP:***24种设计模式--转自刘伟

    转自于高人的文章:http://blog.csdn.net/lovelion/article/details/17517213 2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多 ...

  3. Warning:关于_CRT_SECURE_NO_WARNINGS

    Warning 1 warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s in ...

  4. 【udacity】机器学习-回归

    Evernote Export 1.什么是回归? regression 在监督学习中,包括了输入和输出的样本,在此基础上,我们能够通过新的输入来表示结果,映射到输出 输出包含了离散输出和连续输出 2. ...

  5. Trie树检索字符串

    #include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct TrieNode ...

  6. MAVEN项目的搭建

    MAVEN能为我们做什么? 1.Jar的声明式依赖性管理 2.项目的自动构建 搭建流程 环境配置 http://maven.apache.org/download.html 下载最新版本Maven 3 ...

  7. BA-siemens-insight时间表设置

    时间表问题汇总: 如果遇到这种问题,显示"unable to locate databse object",就使用database transfer上传一边所有的模块信息,然后在操 ...

  8. 【转】C# ArcgisEngine开发中，对一个图层进行过滤，只显示符合条件的要素

    有时候,我们要对图层上的地物进行有选择性的显示,以此来满足实际的功能要求. 按下面介绍的方法可轻松实现图层属性过滤显示: 1.当图层已经加载时 private void ShowByFilter(Ax ...

  9. Android漫游记(6)---APP启动之旅（I）

    Android基于Linux2.6+内核,我们看一张图,以对Android系统的架构有个感性的认识. 我们从Kernel层简单说明: 1.Kernel层:基于Linux2.6+内核.同一时候做了一些嵌 ...

  10. HDU 2035 不忍直视的水

    #include <iostream> #include <cstdio> #include <algorithm> using namespace std; in ...