bfc环境
在网页的排版布局中,都会用到float(浮动)来让网页的排版更加自由,突破块级元素独霸一行的特性。但是当我们将这些块级元素进行浮动后,我们会发现这些块级元素已经脱离了原本的文档流,
跳出三界不在五行中了。这会给我们带了很多不必要的麻烦。这时候就需要用到BFC了。博主在刚接触BFC时也对其懵懵懂懂,但本着不懂不能装懂,不懂就要弄懂的原则,参考了网上这种大神对BFC的
解释说明后,在这里分享下自己所理解的BFC,希望对初学者们有些帮助。
那么什么是BFC?
首先,我们需要知道BFC为Block Formatting Context缩写,中文解释为块级格式化上下文。
其次,我们也需要明白BFC不是HTML/CSS里的一个标签元素属性这类,它是一个环境,是一个独立的渲染区域,它规定了内部的块级别的BOX如何布局,且BFC内和BFC外各不相干。
最后,需要条件触发才能生成BFC环境。那么问题又来了,哪些元素会触发生成BFC呢?
1.根元素。
2.当Float属性不为none时。
3.position为absolute或fixed
4.overflow不为visible
看到这里,肯定一大半人也还没能明白,那我们先来看个示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
上面这段代码是很常见的,一个div里面嵌套两个div,显示结果就是两个div锤子排列。当我们需要两个div水平排列时候,我们常常会将div1和div2进行一个浮动。加入如下代码
.div1,.div2{ float:left; }
这时候两个div便会水平排列。但是这时候你会发现原本包含在一个div里面的两个div已经是独自成块了,没有一个父级元素了,且浮动后的div还会影响到周围其他的布局。这时候
我们就需要用到BFC环境了,我们常常会利用overflow元素的hidden属性来触发BFC。
.div1,.div2{ overflow:hidden; }
加入上述代码后,原本浮动后脱离文档流的两个div现在又从新回到 .father 的怀抱了。
利用overflow:hidden来触发BFC是博主常常用到的。
今天暂且分享这个常常会遇到的问题,其实BFC作用的地方也还挺多的,其他的待我们下次再详谈。
如有对BFC了解更为全面的,欢迎给博主指正。