白话Block Formatting Context
作者：小寒 来源：记事本 发布时间：2010-08-03 12:36:00
一，啥是Block Formatting Context
当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。
二，怎样才能形成Block Formatting Context
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
三，Block Formatting Context在生产中有什么作用
Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）：
<!DOCTYPE html><html><head> <title>Demo</title> <style type="text/css"> html, body { margin: 0; padding: 0; } #red, #orange, #yellow, #green { width: 100px; height: 100px; float: left; } #red { background: red; } #orange { background: orange; } #yellow { background: yellow; } #green { background: green; } </style></head><body> <div id="c1"> <div id="red"></div> <div id="orange"></div> </div> <div id="c2"> <div id="yellow"></div> <div id="green"></div> </div></body></html>
在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
Block Formatting Context可以阻止元素被浮动覆盖。请看示例：
<!DOCTYPE html><html><head> <title>Demo</title> <style type="text/css"> html, body { margin: 0; padding: 0; } #left { width: 100px; height: 100px; background: red; float: left; } #right { height: 200px; background: yellow; } </style></head><body> <div id="left"></div> <div id="right"></div></body></html>
在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。
0
投稿猜你喜欢
在之前的一篇文章 Python利用 AIML 和 Tornado 搭建聊天机器人微信订阅号 中用 aiml 实现了一个简单的英文聊天机器人订- 示例如下：function addFileToZip($path,$zip){ $handler=opendir($path);
- 今天第一次玩SQL Server 2005，需要配置远程连接。我废话少说，直入主题，总结下我从新手立场在win2003 server环境下去
- 目录开始安装使用一、安装 Python二、安装 moviepy三、安装 ffmpeg四、开始写拼接脚本五、等待运行完毕, 完结撒花 🎉六、补
- 本文实例讲述了Python3访问并下载网页内容的方法。分享给大家供大家参考。具体如下：#!/usr/local/bin/python3.2i
- 我们这里所说的head区域，是指页页html代码的<head>和</head>之间的内容。在以前的文章中，主要介绍了
- 对于SQL Server的优化来说，优化查询可能是很常见的事情。由于数据库的优化，本身也是一个涉及面比较的广的话题，因此本文只谈优化查询时如
- 本文实例讲述了python从sqlite读取并显示数据的方法。分享给大家供大家参考。具体实现方法如下：import cgi, os, sys
- 反射是语言里面是非常重要的一个特性，我们经常会看见这个词，但是对于反射没有一个很好的理解，主要是因为对于反射的使用场景不太熟悉。一、理解变量
- 一、简介你一定用过那种“OCR神器”，可以把图片中的文字提取出来，极大的提高工作效率。今天，我们就来做一款实时截图识别的小工具。顾名思义，运
- 编程的生活愈发不容易了，工作越来越难找，说多了都是泪还是给大家贡献些代码比较实际。python3 链接数据库需要下载名为pymysql的第三
- 大家好，并发编程 今天开始进入第二篇。今天的内容会比较基础，主要是为了让新手也能无障碍地阅读，所以还是要再巩固下基础。学完了基础，你们也就能
- 函数的迭代器函数的强大功能叫做迭代器，Python里面最具威力的功能之一。迭代器我们听起来会感觉非常陌生，在list、tuple都有用到它，
- 问题描述：高版本sql备份在低版本sql还原问题（出现媒体簇的结构不正确）分析原因：sql版本兼容问题，sql server兼容级别是用作向
- 1、什么是GIL全局解释器锁GIL：Global Interpreter Lock，意思就是全局解释器锁，这个GIL并不是Python的特性
- 使用 Python 对数据进行更新操作对于 es 的更新的操作，不用到 Search() 方法，而是直接使用 es 的连接加上相应的函数来操
- ndarray.ndim：维度ndarray.shape：形状ndarray.size：元素个数ndarray.dtype：元素数据类型nd
- 1.多态是指传入不同的对象，产生不同的结果多态指的是一类事物有多种形态（一个抽象类有多个子类，因而多态的概念依赖于继承）定义：多态是一种使用
- 下面就是今天下午的研究成果。发布系统需要响应用户的中断请求，需要在GET方法中杀掉由subprocess派生的子进程，刚开始直接用os.ki
- 要使用多个定界符拆分字符串：使用 re.split() 方法，例如 re.split(r',|-', my_str)。re.
