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. vue-留言板-bootstrap

    最近看完入门API,看完视频自己写了个留言板,因为主要是学习vue,所以就复习了一下bootstrap,布局更简单,先看看样式吧. 简单清晰的布局,先说一下功能, 1.输入用户名密码点击提交放入表格 ...

  2. 【Oracle】RAC控制文件多路复用

    1.—关闭数据库,各个节点都要关闭: [oracle@rac1 ~]$ srvctl stop database -d racdb -o immediate 2.—启动任一节点到nomount状态: ...

  3. 编译OpenCV遇到Qmake问题

    1.Ubuntu安装OpenCv,出现:qmake: could not exec '/usr/lib/x86_64-linux-gnu/qt4/bin/qmake': No such file or ...

  4. CV/PR:模式识别与图像处理笔试题

    汉王高级研究人员(模式识别.图像处理类)招聘试题  原文链接:http://www.cnblogs.com/dongsheng/articles/2793142.html 说明:  可能您的专业并不完 ...

  5. 03--（二）编程实践中C语言的一些常见细节

    编程实践中C语言的一些常见细节(转载) 对于C语言,不同的编译器采用了不同的实现,并且在不同平台上表现也不同.脱离具体环境探讨C的细节行为是没有意义的,以下是我所使用的环境,大部分内容都经过测试,且所 ...

  6. 在maven项目结构下对于Resources目录下文件的存取

    在maven项目中,文件结构如下: proj ---src ----main ----java ----Main.java ----resources ----userFile.properties ...

  7. Django 了解

    Django是一个开放源代码的Web应用框架 Django也是一个基于 MVC 构造的框架. 但是在Django中,控制器接受用户输入的部分由框架自行处理,所以 Django 里更关注的是模型(Mod ...

  8. springboot不加载bootstrap.properties文件

    1.首先说一下官网对bootstrap和application两种配置文件的区别: Spring Cloud 构建于 Spring Boot 之上,在 Spring Boot 中有两种上下文,一种是 ...

  9. call和apply的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. js日期原型扩展

    当初做统计业务需要处理时间 周报:本周 上周 下周 近一周 月报上月 本月 等 需要使用时间处理 所以扩展了这些方法 <!DOCTYPE html> <html xmlns=&quo ...