BFC

一、前言

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。

二、正文

下面介绍触发BFC及BFC带来的影响

2.1、触发BFC

 只要元素满足下面任一条件即可触发 BFC 特性:
    * body 根元素
    * 浮动元素:float 除 none 以外的值
    * 绝对定位元素:position (absolute、fixed)
    * display 为 inline-block、table-cells、flex
    * overflow 除了 visible 以外的值 (hidden、auto、scroll)

2.2、BFC的特性及应用

  1. 同一个 BFC 下外边距会发生折叠

解释:因为两个div都处在body这个BFC容器中,如果要避免这种问题可以把这两个div放在两个容器中

  1. BFC 可以包含浮动的元素(清除浮动)

因为浮动元素脱离了文档流,所以容器只剩下2px的高,但是将容器变成BFC,添加代码overflow:hidden,就可以包含浮动元素了。

  1. BFC 可以阻止元素被浮动元素覆盖(就不举例子了)
  2. BFC自适应布局模块间的间距(参考链接)

2.3、总结BFC的布局规则

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

总结

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

参考链接

深入理解BFC

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机器圈

Achartengine.jar绘制动态图形一 --饼图

PS:我们在做安卓程序的时候,免不了会做一些图形,自己可以选择自定义view ,就是用Canvas画,也可以用写好的jar包,就是achartengine.ja...

49280
来自专栏Android机动车

Material Design整理(六)——SearchView及FlexboxLayout

14410
来自专栏互联网杂技

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

31520
来自专栏向治洪

React Native控件只TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型...

37880
来自专栏MasiMaro 的技术博文

SDK平台三态按钮的实现

Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,让它展现出更友好的一面,这次主要是说明三态按钮的实现。

14740
来自专栏程序员宝库

分享前端开发常用代码片段

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

18650
来自专栏刘望舒

剖析Activity、Window、ViewRootImpl和View之间的关系

作者 | 豆沙包67 地址 | https://www.jianshu.com/p/a7596afb1aa1 声明 | 本文是 豆沙包67 原创,已获授权发布,...

27980
来自专栏我有一个梦想

QT Creator 快速入门教程 读书笔记(二)

一 窗口部件 基础窗口部件QWidget类是所有用户界面对象的基类,窗口和控件都是直接或间接继承自 QWidget,下面我们来看一个很简单的例子: ? 窗口部件...

27370
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

32840
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十九——标签页的使用

    Bootstrap中通过为导航标签增加data-toggle="tab",配合类或id来进行标签页的关联,示例如下:

11210

扫码关注云+社区

领取腾讯云代金券