在一个文档流中,盒子模型元素的位置会互相影响。 当一个BFC出现在文档流中时,BFC内部的盒子模型元素同BFC外部的元素之间的位置不会互相影响。 相当于BFC重新创建了一个文档流。 举例: 一个文档流中出现了一个float元素,float元素会影响后续出现的inline或者inline-block的 ...
分类:
其他好文 时间:
2016-05-30 06:28:41
阅读次数:
134
浮动的清除有两种方式: 一、clear clear:both/left/right; 二、创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。通俗 ...
分类:
其他好文 时间:
2016-05-28 20:34:06
阅读次数:
119
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关。 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4 ...
分类:
Web程序 时间:
2016-05-14 06:47:06
阅读次数:
379
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spe ...
分类:
其他好文 时间:
2016-05-14 06:44:18
阅读次数:
219
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们 ...
分类:
Web程序 时间:
2016-05-14 00:51:22
阅读次数:
305
转自穆乙 http://www.cnblogs.com/pigtail/ 一、BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”。 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到 ...
分类:
其他好文 时间:
2016-05-14 00:41:59
阅读次数:
232
1.BFC是什么BFC是块级格式化上下文:
1.BFC规定了元素如何对内容进行定位,以及和其他元素的关系和相互作用
2.BFC提供了一个环境,这个环境中按照一定规则进行布局不会影响其他环境中的布局2.形成BFC的条件(符合一个就可)1.float值不是none
2.overflow值不是visible
3.positive值是absolute或fixed
4.display值是inline...
分类:
其他好文 时间:
2016-05-12 14:16:56
阅读次数:
214
恢复内容开始 what: BFC:"Block Formatting Context" “块及格式化上下文”,文档给出的定义很多,自己觉得就是一句话,无论内部子元素怎么变化,都不会影响外部的元素。 表现原则: 什么时候会触动BFC BFC作用: ***自适应两栏布局 (最简单的实现方式,大多人想到的 ...
分类:
其他好文 时间:
2016-05-09 23:37:47
阅读次数:
417
目录 一、概述 二、块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三、哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四、总结 五、参考资料 常见的块级元素 BFC 常见的行内元素 IFC 浮动 绝对定位 固定定位 display:none 一、概述 ...
分类:
其他好文 时间:
2016-05-06 08:10:01
阅读次数:
613
项目经验:1.如果设置外边距margin 父级元素也跟着移动,把父级元素设置触发BFC环境,overflow:hidden如果直接再子类哪里吧margin改成padding,这样自己内容相对于自己的位置就变了 2.引用外部文件 ./ 代表上一级(父级目录) ../代表上两级 3.调位置,一定是用ma ...
分类:
Web程序 时间:
2016-05-06 02:13:05
阅读次数:
152