10分钟了解什么是BFC
BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和我一样不知道的
什么是BFC?
块级格式化上下文,W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部
怎么触发BFC?
只要元素满足下面任一条件即可触发 BFC 特性:
浮动元素:float值除none以外的值
绝对定位元素:position为absolute或fixed
display为inline-block、table-cell、flex、inline-flex、table-caption
overflow除了visible以外的值(hidden、auto、scroll)
- body根元素
BFC的渲染规则
1. 同一个BFC下垂直方向上相邻的两个box的外边距(margin)会发生重叠
从效果上看的话,两个p元素都处于同一个BFC容器中,所以第一个p元素的下边距会和第二个p元素的上边距重合。重合之后,最终显示的边距是取最大的那个值,也就是25px。所以两个p元素之间的边距值是25px,标准的应该是30px才对。
<section id="margin">
<style>
#margin{
background:pink;
overflow:hidden; }
#margin p{
margin:5px auto 25px;
background:red;
}
</style>
<p>1</p>
<p>2</p>
</section>
这其实不是css的bug,我们可以将其理解为是一种规范。如果我们想要避免外边距重叠的话,根据同一个BFC容器下面的元素才会发生折叠的原理,我们可以将他们放在不同的BFC容器中
解决方法:
将发生重叠的盒子放在另外一个BFC容器中,即添加一个父盒子,将该盒子设置为BFC容器
<section id="margin">
<style>
#margin{
background:pink;
overflow:hidden; }
#margin p{
margin:5px auto 25px;
background:red;
}
</style>
<p>1</p>
<div style="overflow: hidden">
<p>2</p>
</div>
<p>3</p>
</section>
2. BFC可以包含浮动的元素
我们都知道,浮动的元素都会脱离文档流,我们来看一下下面的例子
<section id="layout">
<style>
#layout{
background:red; }
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: green;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
效果图:
通过这个图我们可以看出,右侧的盒子因为高度比左边的高之后,因为BFC的缘故,就延申到它的左侧去了。这个例子我们做前端的应该是经常遇到的,很多人知道应该怎么解决,但是却不知道它的原理,这是因为BFC的缘故
解决方法:
给右侧的盒子设置为BFC容器,添加overflow属性,注意overflow不能为visible
<section id="layout">
<style>
#layout{
background:red; }
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: green;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
3.计算BFC高度时,浮动元素也参与计算
下面我给大家举一个非常常见的例子:
<section id="float">
<style>
#float {
background: red;
} #float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
相信大家在开发的时候肯定有遇到过这个,子元素浮动之后,子元素的高度没有算到父元素上面,导致父元素的高度为0
解决方法:
给父元素设置为BFC,添加overflow:hidden属性
<section id="float">
<style>
#float {
background: red;
overflow: hidden;
} #float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
4 . BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
例子在2,3里面有体现
10分钟了解什么是BFC的更多相关文章
- 10分钟理解BFC原理
10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...
- 【MySQL】花10分钟阅读下MySQL数据库优化总结
1.花10分钟阅读下MySQL数据库优化总结http://www.kuqin.com2.扩展阅读:数据库三范式http://www.cnblogs.com3.my.ini--->C:\Progr ...
- 对iOS后台模式最多10分钟运行时间的进一步理解
在app进入后台时,系统初始默认是只有10s的处理时间,但如果10s不够,我们可以主动申请,网上流传最多的一个说法是10分钟. 但这种说法有个前提: 那就是iOS7之前,是这样 但从iOS7开始,我们 ...
- Apache Shiro系列三,概述 —— 10分钟入门
一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...
- 破解YunFile下载间隔10分钟/下载等待30秒
[破解10分钟间隔] 可以采用断网重连等方法重新获取IP地址,就不用再等十分钟了 [破解30秒等待] 收藏一个书签,书签地址如下 javascript:var downpage_link = docu ...
- JavaScript 10分钟入门
JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...
- emacs最简单入门,只要10分钟
macs最简单入门,只要10分钟 windwiny @2013 无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...
- UWP开发入门(十九)——10分钟学会在VS2015中使用Git
写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开 ...
- U盘10分钟安装linux系统
说来可能不信,10分钟包括创建U盘启动盘,用U盘启动,安装,不联网,不更新,不安装语言包,等装好系统再更新. Windows系统硬盘分区 如果你用的是Windows系统,现有的硬盘没有未分配的空间,需 ...
随机推荐
- json-lib简单处理json和对json的简单介绍
JSON 1.json是什么? *它是js提供的一种数据交换格式 2.json的语法 *{}:是对象! >属性名必须使用双引号括起来!单引号不行!!! >属性值: *null *数值 *数 ...
- QListWidget拖放
setDragEnabled() 允许拖 setAcceptDrops()允许放 setDragDropMode(QAbstractItemView.DragDrop)设置拖拽模式 setSelect ...
- 【论文笔记】基于图机构的推荐系统:Billion-scale Commodity Embedding for E-commerce Recommendation in Alibaba
论文:https://arxiv.org/abs/1803.02349 题外话: 阿里和香港理工联合发布的这篇文章,整体来说,还挺有意思的. 刚开始随便翻翻看看结构图的时候,会觉得:这也能发文章 ...
- [原]NYOJ-216-A problem is easy
大学生程序代写 /*A problem is easy 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 When Teddy was a child , he was a ...
- CH5103 [NOIP2008]传纸条[线性DP]
给定一个 N*M 的矩阵A,每个格子中有一个整数.现在需要找到两条从左上角 (1,1) 到右下角 (N,M) 的路径,路径上的每一步只能向右或向下走.路径经过的格子中的数会被取走.两条路径不能经过同一 ...
- 检测 iOS 的 APP 性能的一些方法
本文转载于微信公众号:iOS大全 首先如果遇到应用卡顿或者因为内存占用过多时一般使用Instruments里的来进行检测.但对于复杂情况可能就需要用到子线程监控主线程的方式来了,下面我对这些方法做些介 ...
- nefu阶乘定理
Description 小明的爸爸从外面旅游回来给她带来了一个礼物,小明高兴地跑回自己的房间,拆开一看是一个很大棋盘(非常大),小明有所失望.不过没过几天发现了大棋盘的好玩之处.从起点(0,0)走到终 ...
- arm交叉编译 扫盲贴
ARM交叉编译工具链 为什么要用交叉编译器? 交叉编译通俗地讲就是在一种平台上编译出能运行在体系结构不同的另一种平台上的程序, 比如在PC平台(X86 CPU)上编译出能运行在以ARM为内核的CPU平 ...
- java笔试(2)
- 通过DBCC整理Sqlserver数据库表索引碎片
昨天检查了一张效率极慢的表,两年多没有维护,逻辑扫描碎片高达99.%,于是开始对这个表进行重点跟踪和记录日志.今天用DBCC SHOWCONTIG WITH TABLERESULTS 命令检查了一下所 ...