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系统,现有的硬盘没有未分配的空间,需 ...
随机推荐
- javascript获取窗口位置、绝对位置、事件位置等
有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑, ...
- 使用NSURLProtocol和NSURLSession拦截UIWebView的HTTP请求(包括ajax请求)
问题:服务器端有一个网站需要AD认证,整站都开了Basic认证,包括图片,CSS等资源,我在HTTP请求头里面添加认证所需的用户名和密码,传递到服务器端可以认证通过.我在UIWebView的shoul ...
- bzoj 2850 巧克力王国——KDtree
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2850 改一下估价即可.判断子树能否整个取或者是否整个不能取,时间好像就能行了? 因为有负数, ...
- 如何利用pyenv 和virtualenv 在单机上搭建多版本python 虚拟开发环境
pyenv 和virtualenv分别是干什么的? pyenv帮助你在一台机上建立多个版本的python环境, 并提供方便的切换方法. virtualenv则就是将一个目录建立为一个虚拟的python ...
- 【转】Pro Android学习笔记(十四):用户界面和控制(2):Text类控制
目录(?)[-] TextView 例子1在XML中设置autoLink属性 例子2在代码中设置autoLink属性 EditText AutoCompleteTextView MultiAutoCo ...
- 【jQuery】CheckBox使用attr全选无法正确显示
今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> ...
- 转载:Android Studio调试功能使用总结
这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 ...
- qtp重定义数组大小
a dim arr1() ) a dim arr() ReDim arr(a) arr arr ) arr For each i in arr print arr(i) Next
- Project Online JS 添加Ribbon按钮
var Projects = Projects || {}; (function () { Projects.ribbonButtonClick = function (name) { var pro ...
- IOS+openCV在Xcode的入门开发
昨天折腾了一天,终于搞定了openCV+IOS在Xcode下的环境并且实现一个基于霍夫算法的圆形识别程序.废话不多说,下面就是具体的折腾流程: ---------------------------- ...