bfc

  BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。

一、BFC是什么?

  在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。

  Box: CSS布局的基本单位

  Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:

  • block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
  • run-in box: css3 中才有, 这儿先不讲了。

  Formatting context

  Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

  CSS2.1 中只有 BFC 和 IFCCSS3 中还增加了 GFC 和 FFC。

  BFC 定义

  BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

  BFC布局规则:

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

二、哪些元素会生成BFC?

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

三、BFC的作用及原理

  1. 自适应两栏布局

  代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

  页面:
  

  根据BFC布局规则第3条:

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

  根据BFC布局规则第四条:

BFC的区域不会与float box重叠。

  我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。

1
2
3
.main {
    overflow: hidden;
}

  当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下:

  

  2. 清除内部浮动

  代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

  页面:
  

  根据BFC布局规则第六条:

计算BFC的高度时,浮动元素也参与计算

  为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。

  代码:

1
2
3
.par {
    overflowhidden;
}

  效果如下:
   ?

  3. 防止垂直 margin 重叠

  代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    p {
        color#f55;
        background#fcc;
        width200px;
        line-height100px;
        text-align:center;
        margin100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

  页面:
  

  两个p之间的距离为100px,发送了margin重叠。
  根据BFC布局规则第二条:

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。
  代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

  效果如下:
  

总结

  其实以上的几个例子都体现了BFC布局规则第五条:

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

  因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin

本文出处【http://www.cnblogs.com/lhb25/】

 

以下来源于《HTML 5 移动Web开发实战详解》 林珑 著

BFC的元素可以当做一个密闭的大箱子,箱子外部的元素不与箱子内部的元素产生作用,此时在这个BFC元素内的元素有如下的特征:
1、外边距将不再与上下文之外的元素折叠
2、其内可以包含浮动元素
3、可以组织浮动元素被覆盖
4、框会一个接一个地被垂直放置,它们的起点是一个包含快的顶部。即,BFC中的文字将不会环绕邻接的浮动盒子排布,而是竖直排布,因为行框将会一个接一个的垂直放置

如何触发BFC:
1、浮动元素,浮动元素本身形成一个BFC
2、绝对定位元素
3、行内块元素(display:inline-block)
4、表格单元格和标题(display:table-cell或display:table-caption)
5、overflow为非visible的元素

转载于:https://www.cnblogs.com/wpbars/p/5955033.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python语法异常 Exception

常见异常&#xff1a;Exception 所有异常的基类AttributeError 特性应用或赋值失败时引发IOError 试图打开不存在的文件时引发IndexError 在使用序列中不存在的索引时引发KeyError …

Python的Django框架中forms表单类的使用方法详解

Form Form的验证思路 前端&#xff1a;form表单 后台&#xff1a;创建form类&#xff0c;当请求到来时&#xff0c;先匹配&#xff0c;匹配出正确和错误信息。 Django的Form验证实例&#xff1a; 创建project&#xff0c;进行基础配置文件配置 settings.py settings.py之…

java读取gpx文件,从Leaflet导出GPX文件

我想要做的是让用户通过选择Leaflet中的一些GeoJson功能来创建GPX文件 . 我这样做的方法是创建一个新的GeoJson图层来存储所选的特征&#xff0c;然后用一个名为togpx(https://github.com/tyrasd/togpx)的插件将其转换为gpx . 现在我有一个gpx文件&#xff0c;但我没有t know h…

Mono Compatibility

The easiest way to describe what Mono currently supports is:Everything in .NET 4.5 except WPF, WWF, and with limited WCF and limited ASP.NET 4.5 async stack. System.Web and WCF are candidates for ‘almost immediate’ porting from the .NET reference source …

Python的Django框架中forms表单类的使用方法详解2

用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解。 Form表单的功能 自动生成HTML表单元素检查表单数据的合法性如果验证错误&#xff0c;重新显示表单&#xff08;数据不会重置&#xf…

生动形象的理解API是如何工作的!

API(Application Programming Interface,应用程序编程接口) 简单来说&#xff0c;就是其他人开发出来一块程序&#xff0c;你想用&#xff0c;他会告诉你调用哪个函数&#xff0c;给这个函数传什么参数&#xff0c;然后又会返回给你一个什么样的结果&#xff0c;你不需要知道他…

ann matlab,人工神经网络ann及其matlab仿真.ppt

人工神经网络ann及其matlab仿真人工神经网络 的研究方法及应用刘 长 安2004. 12. 31 引 言 利用机器模仿人类的智能是长期以来人们认识自然、改造自然和认识自身的理想。 研究ANN目的&#xff1a; (1)探索和模拟人的感觉、思维和行为的规律&#xff0c;设计具有人类智能的计算机…

字符串与树的结合

https://leetcode.com/problems/scramble-string/?tabDescription 虽然题目不常见&#xff0c;但是里面关于字符串调转和递归的思路&#xff0c;还是很有代表性的。 https://discuss.leetcode.com/topic/14337/share-my-4ms-c-recursive-solution/2 这个解法也把里面关于递归的…

ubuntu 安装过程所需软件

ubuntu 开发过程好用的软件 Remarkable 一个用于书写文档的好工具&#xff0c;包括方便书写数学公式。安装过程 点击上面“remarkable”下载.deb文件&#xff0c;然后双击会跳转到ubuntun的软件安装中心&#xff0c;点击install进行安装。 sublime text3 配置 自定义快捷键Pref…

Day05-循环和列表字符串、元组和字典

一、字符串 字符串就是由若干个不同的unicode字符组成的不可变序列 1 .字符串创建 #单引号字符串 str1 天要下雨&#xff0c;娘要嫁人&#xff0c;由他去吧 str2 str() #空串 str3 str([10,20,30]) ​ #双引号字符串 str2 "天要下雨&#xff0c;娘要嫁人&#xff…

@查看MySQL版本的方法

1.在终端下:mysql -V. [rootlocalhost bin]# mysql -V; mysql Ver 14.14 Distrib 5.6.21, for Linux (x86_64) using EditLine wrapper [rootlocalhost bin]# mysql -v; ERROR 1045 (28000): Access denied for user rootlocalhost (using password: NO) 注意&#xff0c;这…

echarts 柱状图 ,颜色和显示设置

最近在使用echart开发图标&#xff0c;api里面虽然有些设置&#xff0c;但是如果想让柱状图每个柱的颜色都不相同&#xff0c;简单的通过color设置是没有作用的&#xff0c;这里&#xff0c;就要用到其他的方式了 下面只是列举下我认为比较常用的&#xff0c;其他的比较简单&am…

Pycharm 专业版 导入系统pip安装的包

Pycharm 专业版 导入系统pip安装的包 在setting 中找到project interpeter ,点击设置图标&#xff0c;点击Add&#xff0c;得到如图所示选择 System Interpreter即可,这样 用pip安装的包都加再进来了

nodejs express

2019独角兽企业重金招聘Python工程师标准>>> 创建express服务器 //app.js文件 var express require(express); var app express(); //指定更目录显示的内容 app.get(/, function(req, res){ res.send(Hello World); }); //指定监听端口 var server app.listen(…

JS常见知识点

1、写一个按照下面方式调用都能正常工作的 sum 方法 console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5 解决方案 function sum() {var fir arguments[0];if (arguments.length 2) {return arguments[0] arguments[1]} else {return function (sec…

格雷码 matlab,基于格雷码的结构光重建代码(MATLAB版本)

【实例简介】该代码为brown university相关技术人员编写&#xff0c;旨在用于学习研究3D结构光的原理、算法实现和应用。由于原有的网站( http://mesh.brown.edu/byo3d/index.html )近期无法访问&#xff0c;为了便于3D爱好者可以方便学习相关内容&#xff0c;特将该网站部分代…

Day06-函数

函数 一、集合&#xff08;set) 特点:不允许有重复元素&#xff0c;如果添加重复元素&#xff0c;则会自动过滤&#xff0c;可以进行交集、并集的运算。 本质&#xff1a;无序且无重复元素的数据结构 1 创建集合 s1 set() #空集合 不能是{}&#xff0c;这是字典 s2 {1…

在TextView中实时显示数据

//下面实时更新显示在textView中的数据handler new Handler();runnable new Runnable(){Overridepublic void run(){// TODO Auto-generated method pushupTextView.setText(Integer.toString(Number.pushup_number)); handler.postDelayed(this, 1000); }}; handle…

DuangDuangDuang!码云项目的 Readme.md 特殊技能

为什么80%的码农都做不了架构师&#xff1f;>>> 我们在 码云 上创建新项目的时候&#xff0c;常常会看到默认使用 README 文件初始化该项目&#xff08;如图1 所示&#xff09;&#xff0c;然后在新建项目的根目录下就会生成一个 README.md 文件&#xff08;如图2 …

java sunjce,无法初始化类javax.crypto.SunJCE_b

我已经开发了一个Javaservlet应用程序&#xff0c;并且在我的开发PC上&#xff0c;一切正常&#xff0c;包括按计划使用SFTP通过端口8443等上的HTTPS并以适当的SSL证书通过PDF复制PDF。但是&#xff0c;当我尝试在实时服务器上运行该应用程序时&#xff0c;会收到错误消息。jav…