文章首发于掘金

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流

想要实现一个BFC布局需要满足以下条件之一:

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

想要创建一个BFC有很多方式,但是一些方式可能会带来其他的麻烦,例如overflow:scroll等,所以使用的时候还是要注意一下,本文统一使用overflow:hidden来创建BFC。

1. bfc区域不会与float box 重叠

<style>
body {
width: 300px;
position: relative;
} .aside {
width: 100px;
height: 150px;
float: left;
background: #666666;
} .main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>



如果我们想要的效果是两个盒子分开,那么我们可以利用BFC的布局规则:BFC区域不会与float box重叠的原则,我们给main加上overflow:hidden的属性,神奇的事情发生了:

2. 计算bfc高度的时候,浮动元素也参与计算

 <style>
body {
width: 500px;
} .par {
border: 5px solid #fcc;
/* 下面几种方式都会生成bfc */
/* overflow: hidden; */
/* display: inline-block; */
/* position: absolute; */
/* float: left; */
} .child {
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
} </style>

上述代码因为浮动,会出现par高度塌陷的情况,为了达到清除内部浮动,我们可以触发par生成bfc,那么par在计算高度的时候,par内部的浮动元素child也会参与计算,所以我们给par加上overflow:hidden的属性后问题就解决了。

3. 属于同一个bfc的两个相邻box的margin会发生重叠

<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
margin: 100px;
}
</style> <body>
<p>haha</p>
<p>hehe</p>
</body>



正常我们给两个p 标签都加上了margin:100px,但是两个p之间只有100px,为什么呢,同一个BFC环境时候,重叠的margin只去最大的,所以如果想解决这个问题,我们可以把下面的p标签包一层BFC。

    <style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
margin: 100px;
}
.warp {
overflow: hidden;
}
</style>
<p>haha</p>
<div class="warp">
<p>hehe</p>
</div>

总结BFC的三种特性

  1. bfc区域不会与float box 重叠
  2. 计算bfc高度的时候,浮动元素也参与计算
  3. 属于同一个bfc的两个相邻box的margin会发生重叠

【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用的更多相关文章

  1. 系统讲解CSS,前端开发最神奇的技术,新手的你一定不能错过

    前面小编带领大家重温了前端开发中最基本的HTML语言.如果你已经掌握了这门语言,那么恭喜你,可以去深入了解CSS技术了.CSS技术最主要的功能就是弥补HTML标记对在页面中显示外观的不足,对这些标记对 ...

  2. Css技术入门笔记01

    在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...

  3. CSS Secrets 翻译笔记 01: CSS coding tips

    .firDemoButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0 ...

  4. 神奇的 CSS,让文字智能适配背景颜色

    最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...

  5. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  6. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  7. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  8. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  9. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  10. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

随机推荐

  1. NowCoder数列(矩阵快速幂变式)

    时间限制 3000 ms 内存限制 32768 KB 代码长度限制 100 KB 题目描述 NowCoder最近在研究一个数列: * F(0) = 7 * F(1) = 11 * F(n) = F(n ...

  2. rest_framework 的验证,权限,频率

    回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之 ...

  3. 缓存算法及Redis、Memcached、Guava、Ehcache中的算法

    https://my.oschina.net/ffy/blog/501003 https://yq.aliyun.com/articles/622757 https://blog.csdn.net/s ...

  4. FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    官网:http://ffmpeg.org 一.FFmpeg安装 安装依赖包: yum install libtheora-devel libvorbis-devel 1 FFmpeg编译安装: 由于系 ...

  5. spring AOP正则表达式的几个问题

    基于包名的正则表达式,是根据抽象父类的包名过滤,还是实现类的包名过滤, 还是抽象父类实现的接口的包名过滤? org.springframework.aop.aspectj.AspectJExpress ...

  6. Python IDLE快捷键汇总

    Python IDLE快捷键汇总 在Options→configure IDLE→keys,查看现存的快捷键,也可以配置选择快捷 编辑状态时: Ctrl+Shift+space(默认与输入法冲突,修改 ...

  7. GO 日志追加记录

    以追加的方式将程序输出到不同的日志文件,当日志文件超过10M大小时,自动清空文件. package tools import ( "fmt" "log" &qu ...

  8. 实用的vue插件大汇总

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

  9. 网页console console.log 用法 Chrome F12

    #########sample 0 https://www.cnblogs.com/xiaozong/p/4961929.html https://blog.csdn.net/shanliangliu ...

  10. Android NDK开发 JNI类型签名和方法签名(六)

    在Java存在两种数据类型: 基本类型 和 引用类型 ,大家都懂的 . 在JNI的世界里也存在类似的数据类型,与Java比较起来,其范围更具严格性,如下: 1.primitive types ---- ...