CSS中BFC的理解_js

ID：37941057

大小：328.69 KB

页数：10页

时间：2019-06-03

资源描述：

《CSS中BFC的理解_js》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、1BFC是什么BlockFormattingContext（块格式化上下文）是W3CCSS2.1规范中的一个概念，在CSS3中被修改为flowroot。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下的方式对其子元素进行排列：元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于'margin'特性。在BFC中相邻的块级元素

2、的垂直边距会折叠（collapse）。元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。如对于如下的HTML页面：1<

3、metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">body{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#ffff99;border:1pxsolid#111111;padding:5px;}.fatherdiv{padding:10px;margin:15px;border:1pxdashed#111111;backgro

4、und-color:#90baff;}.fatherp{border:1pxdashed#111111;background-color:#ff90ba;}abcd

abcd

timetogooutoftheda

5、y,bigmoney,fireout,fireoff,gogogogogogogogogogogogogo

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

6、范说明了在下列这些情况下会创建新的blockformattingcontext：浮动元素（float:left

8、fixed）；行内块元素（display:inline-block）；表格的单元格（display:table-cells，TD、TH）；表格的标题（display:table-captions，CAPTION）；'overflow'特性不为visible的元素（除非该值已经传播到viewport?）；表格元素创建的"匿名框"注意，"display:t

9、able"本身并不产生"blockformattingcontexts"。但是，它可以产生匿名框6，其中包含"display:table-cell"的框会产生块格式化上下文。总之，对于"display:table"的元素，产生块格式化上下文的是匿名框而不是"display:table"注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下文。3BFC的主要特性BFC的主要用处是清除浮动，以及实现多栏布局33.1创建了BFC的元素中，子浮动元素也会参与高度的计算，即不会发生高度‘塌陷’,可以利用这个特性来实现清除浮动的功能

CSS中BFC的理解_js

CSS中BFC的理解_js

相关文章

相关标签