何为BFC?

何为BFC?

BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,内部不会影响外部布局,反之亦然,每个BFC都遵守同一套布局规则。

如何创建BFC?

  • float:left|right
  • position:absolute|fixed
  • display: table-cell|table-caption|inline-block|flex | inline-flex
  • overflow: hidden|scroll|auto

BFC有何特性?

  1. 内部的Box会在垂直方向,从顶部开始一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  2. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  3. BFC的区域不会与float box叠加。
  4. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  5. 计算BFC的高度时,浮动元素也参与计算。

关于BFC的应用会留到下一篇。

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2015-07-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS进阶06-相对定位Relative Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

752
来自专栏小白课代表

软件分享 | ZoomIt 4.5 演示辅助工具使用教程

ZoomIt是一款非常实用的投影演示辅助软件。它源自Sysinternals公司,后来此公司被微软收购,因此,有些网友也称ZoomIt为微软放大镜。ZoomIt...

1141
来自专栏刘望舒

React Native组件(四)TextInput组件解析

1 概述 TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, Tex...

1978
来自专栏木子昭的博客

<网页布局>解决margin-top塌陷,实现子元素动态改变父元素尺寸1.伪类解决margin-top塌陷:2.浮动子元素动态改变父元素宽度:

1.伪类解决margin-top塌陷: 如果两个不浮动的盒子相互嵌套,对内部的盒子设置margin-top会导致属性被自动转移到外部的盒子上,导致内部盒子的ma...

3436
来自专栏王磊的博客

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!

jquery取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); //...

5039
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

1230
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第二天

2925
来自专栏cnblogs

bootstrap源码分析之form、navbar

一、表单(Form) 源码文件: _form.scss mixins/_form.scss 1、按层次结构分:form-group -> form-contr...

2297
来自专栏施炯的IoT开发专栏

Windows Mobile上的HTML解析器

Matjaž Prtenjak提出这个移动设备上HTML解析器、并表现在HTML Label上的最初目的,就是为了能够在界面上实时地改变一些控件上的文字内容和...

2125
来自专栏极乐技术社区

微信小程序开发详解《五》布局基础

1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

5725

扫码关注云+社区

领取腾讯云代金券