HTML 中BFC的理解

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了。

display 属性为 block, list-item, table 的元素,会产生BFC.

给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

BFC布局规则特性:

1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.

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

3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。

  1. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
  2. 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

原文地址:https://www.cnblogs.com/wait59/p/12628486.html

时间: 2024-11-09 06:13:01

HTML 中BFC的理解的相关文章

揭开CSS中BFC的面纱

引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器. 二.形成BFC的条件 1.浮动元素,float 除 none 以外的值:       2.定位元素,position(absolute,fixed):       3.disp

BFC的理解与应用

什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列. BFC的运用 在w3c的规范中,除了上

BGP中正则表达式的理解

今天不经意和网上一个朋友聊到H3CTE 考试,不过很遗憾的上我考挂了,所以才和他讨论的,当时讨论BGP 的路由属性控制MED 和LOCAL-PECR ,突然帽出来个正则表达式,很郁闷的是,我一直都没怎么在乎这个东西,以前只是看到过,以为不怎么重要,今天他突然和我讲了下重要性,而且当时考H3CTE 就需要用上这个,汗~~~居然都不知道.和他聊完我立即找这相关方面的资料,找到了一点点,郁闷很难看懂啊,都是一些符号不好理解啊.没法呀,得学习^_^ 下面是对BGP 正则表达式的介绍 . 匹配任意单个字符

畅销书对Java中Iterator的理解误区

声明:本博客为原创博客,未经允许,不得转载!原文链接为http://blog.csdn.net/bettarwang/article/details/28110615 最近放假,闲来无事,便翻看以前看过的一些书,竟然发现有些书本(甚至是一些畅销书)对Java中Iterator有很大的误解,比如某畅销书在Collection那一章有这么一句话:"当使用Iterator对集合元素进行迭代时,Iterator并不是把集合元素本身传给了迭代变量,而是把集合元素的值传给了迭代变量,所以修改迭代变量的值对集

php中session的理解

一.Session是什么 Session一般译作会话,牛津词典对其的解释是进行某活动连续的一段时间.从不同的层面看待session,它有着类似但不完全同样的含义.比方,在web应用的用户看来,他打开浏览器訪问一个电子商务站点,登录.并完毕购物直到关闭浏览器,这是一个会话. 而在web应用的开发人员开来.用户登录时须要创建一个数据结构以存储用户的登录信息.这个结构也叫做session. 因此在谈论session的时候要注意上下文环境. 二.Session因何而来? 我们知道http协议是WEBse

第二话:javascript中闭包的理解

闭包是什么? 通过闭包,子函数得以访问父函数的上下文环境,即使父函数已经结束执行. OK,我来简单叙述下,先上图. 都知道函数是javascript整个世界,对象是函数,方法是函数,并且js中实质性的面向对象相关也都是函数来实现和延伸,例如:"类". window:是指js中window类,也是js最高一层,因为什么这么说,因为你所有创建的方法和属性其实都在window之内.window中的所有方法,在自己创建的方法中都可以调到.可以仔细想想alert,在任何地方都可以alert,其实

C++中关键字的理解--Static

C++中关键字的理解---Static 目录:1.static缘起             2.static自我理解             3.static举例使用             4.总结 -------------------------------------------------------------------------------------------------- 1.static缘起         C语言是面向过程构架,多文件为单位的编码的优异之处在于保持不同

Fouandation(NSString ,NSArray,NSDictionary,NSSet) 中常见的理解错误区

Fouandation 中常见的理解错误区 1.NSString //快速创建(实例和类方法) 存放的地址是 常量区 NSString * string1 = [NSString alloc]initWithString:@“123”]; NSString * string3 = [NSString stringWithString:@“123”]; //格式化方法创建   存放地址是堆区 NSString * string2 = [NSString alloc]initWithFormat:@

谈谈我对Java中CallBack的理解

谈谈我对Java中CallBack的理解 http://www.cnblogs.com/codingmyworld/archive/2011/07/22/2113514.html CallBack是回调的意思,熟悉Windows编程的人对"回调函数"这四个字一定不会陌生,但是Java程序员对它可能就不太了解了."回调函数"或者"回调方法"是软件设计与开发中一个非常重要的概念,掌握"回调函数"的思想对程序员来说(不管用哪种语言)