BFC · 前端 · 看云

# BFC 了解BFC首先需要了解什么是视觉格式化模型。他定义了块盒，行内盒，匿名盒。盒子类型由display属性决定。 **如何创建BFC** * 浮动 (元素的float不为none)； * 绝对定位元素 (元素的position为absolute或fixed)； * 行内块inline-blocks(元素的 display: inline-block)； * 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)； * overflow的值不为visible的元素； * 弹性盒 flex boxes (元素的display: flex或inline-flex)； ## 块盒块盒有一下特征，display属性为block list-item table时，是块级元素。视觉上呈现为块，**竖直排列**。参与BFC。 ## 行内盒当元素的display属性为inline，inline-block或者inline-table时，称为行内级元素。视觉上将元素排列为多行。 ## 匿名盒匿名盒分为匿名块盒与匿名行内盒。他们的属性都为inherit或初始默认值。 # 文档流浮动绝对定位 ## 常规流在常规文档流中，盒子一个接一个排列。 * 在块级格式化上下文中，他们竖着排列。 * 在行内格式化上下文中，他们横着排列。 * 当position为static或relative，且float为none时，触发常规流。 * 相对于静态定位，盒子的位置是常规流布局里的位置。 * 相对于相对定位，盒子偏移位置由top bottom left right等属性决定，即使有偏移，依然保存原有位置。其他常规流不可以占用这个位置。 ## 浮动盒子在浮动后位于当前行的开头或结尾，这常常导致常规流环绕在该元素周边，除非进行清除浮动处理。 ## 绝对定位 * 绝对定位方案，盒从常规流中被移除，不影响常规流的布局； * 它的定位相对于它的包含块，相关CSS属性：top，bottom，left及right； * 如果元素的属性position为absolute或fixed，它是绝对定位元素； * 对于position: absolute，元素定位将相对于最近的一个relative、fixed或absolute的父元素，如果没有则相对于body； # BFC作用 [此处例子详见](http://www.html-js.com/article/1866http://www.html-js.com/article/1866) **1.解决外边距叠加** 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 **2.用于布局** ~~~ body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: blue; } .main { height: 200px; background: #f00; } <div class="aside"></div> <div class="main"></div> ~~~ 这样时可以发现，两个元素发生重叠。对main增加overflow:hidden后可以发现，分成了两列布局。 **3.清除浮动** ~~~ <div class="BFC"> <div class="box"> </div> <div class="box"> </div> </div> ~~~ 在css为以下情况时，会需要我们清除浮动： ~~~ .BFC { border: 5px solid #f00; width: 300px; } .box { border: 5px solid blue; width:100px; height: 100px; float: left; } ~~~ 方法很简单，对.BFC增加overflow:hidden;即可。 #### 关于浮动 > 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 > **清除浮动的方法** 1. clear 例如： ```html <div class="news"> < img src="./3.png" /> <p>some text</p > <div class="clear"></div> </div> ``` 对应的css： ```css <style media="screen"> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } </style> ``` 2. overflow-hidden 对包裹元素的父类设置hidden。例如： ```html <style media="screen"> .news { background-color: gray; border: solid 1px black; overflow: hidden; } .news img { float: left; } .news p { float: right; } </style> </head> <body> <div class="news"> < img src="./3.png" /> <p>some text</p > </div> </body> ``` 3. 使用after伪元素使用after创建一个不可见的block ```html <style media="screen"> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear:after { content: '00'; display: block; visibility: hidden; clear: both; height: 0; } .clear{ zoom:1; zoom为ie专有属性触发hasLayOut } </style> </head> <body> <div class="news clear"> < img src="./3.png" /> <p>some text</p > </div> </body> ```