布局的时候经常想让一个或几个元素并并排的放在一起,有时给其中的一个浮动,元素是在一行了,可还是都左边重叠了,总是这样那样改来改去,小白的我也是醉了! 今天偶然间看到了了BFC这个东东,虽然现在还是不是很深入的了解,但至少一行不用在在上面的问题上浪费时间了(捂脸). 一.什么是BFC? BFC(Block Formatting Context)直译为“块级格式化范围”. W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的…

1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 object.currentStyle.hasLayout . ‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分.在 IE 浏览器中,一个元素要么自己对自身的内容进行组织和计算大小, 要么依赖于包含块来计算尺寸和组织…

1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的mar…

转自:http://www.smallni.com/haslayout-block-formatting-contexts/ 因为本人脑子不好使,自己打印出了一张hasLayout和Block Formatting Contexts(以下简称BFC)的触发表贴在办公桌上(也可以称作创建了BFC),每天看看就记住了,不知道大家有没有对这2个东西做过深入了解,如果真的做过了解,一些各浏览器部分奇怪的BUG也会迎刃而解.今天,我们一起来剖析下,揭开它们神秘的面纱. 1.hasLayout ‘Layou…

margin折叠的产生有几个条件: 这些margin都处于普通流中,并在同一个BFC中: 这些margin没有被非空内容.padding.border 或 clear 分隔开: 这些margin在垂直方向上是毗邻的,包括以下几种情况:1.一个box的top margin与第一个子box的top margin2.一个box的bottom margin与最后一个子box的bottom margin,但须在该box的height 为auto的情况下3.一个box的bottom margin与紧接着的下…

BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发BFC的方法有下面几种,满足当中随意一种就能触发BFC: 浮动元素(float除了none以外随意值) 绝对定位元素(position为absolute或fixed) display为inline-block或table-cell或table-caption overflow为除了visible以外…

1.伪类与伪元素 1.单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素. 2.对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的. 3.所以,如果你的网站只需要兼容 webkit.firefox.opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全. 4.<img> .<input>.<iframe>,这几个标签是不支持类…

1. 负外边距 上下200*200盒子的重叠,切记用 absolute 绝对定位 为最佳解决方案. 定位 position : fixed    absolute    relative( top 为 -200px ) 如果元素有文字,会覆盖元素 浮动 float :  需要使得要浮动的元素,作为被覆盖元素的兄弟元素,且在上 浮动元素怎么浮,都不会浮出父级元素 始终不会超过前面的兄弟元素 本旨解决文字环绕浮动元素,即如果被覆盖元素有文本,文本会被挤出来 负外边距 margin 设置一个负值 ma…

一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div.无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 浮动 浮动:浮动的框可以左右移动,直至它的外边缘遇到包…

待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatting context)会计格式化上下文. 最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC).CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC. 通俗的理…