Formateo de contexto a nivel de bloque (Block Formateo Contexto, denominado en BFC)
A nivel de bloque de formatear contexto instrucciones
-
Definición: un área independiente de la representación, que se ha especificado en esta región, la corriente normal del bloque de diseño de cassette
-
BFC diferentes áreas, que hacen y no hacen Infect
-
Crear elementos de BFC, separados de sus enlaces internos y externos, la representación interna no afecta a la externa
A nivel de bloque contexto específico regla de formato
- elementos BCF creado, que es necesario para calcular la altura del elemento flotante automática
- razones: Con el fin de aislar los enlaces internos y externos, si la altura de la caída, el flotador salir al exterior para
.container{
background: lightbule;
position:absolute/fixed
float:left/right
overflow:scroll/auto/hidden;(副作用最小)
}
- BFC creado elementos, que no se solapa el flotador frontera
- Causas: Para aislar los enlaces internos y externos, el elemento flotante no flotará lejos de los elementos (el valor alcanzado por el margen), pero todavía dispuestos en una fila
.container{
background: lightbule;
position:absolute/fixed
float:left/right
overflow:scroll/auto/hidden;(副作用最小)
}
- BFC crear elementos de sus hijos y no será márgenes consolidados
.Motivo: Con el fin de aislar los enlaces internos y externos, el contenedor perteneciente a la BFC HTML, contenedor secundario que pertenece a la BFC
.container{
background:#008c8c;
height:500px;
margin-top:30px;
position:absolute/fixed
float:left/right
overflow:scroll/auto/hidden;(副作用最小)
}
.child{
height:100px;
margin: 50px;
background: lightbule;
}
-
trozos de transmisión en cartucho convencionales comparativos
* 在水平方向上，必须撑满包含块 * 在包含块的垂直方向独占一行依次摆放 * 外边距无缝隙相邻(包括padding border)，则进行外边距合并 * 自动高度和摆放位置，无视浮动元素，绝对，固定定位元素
área de prestación de BFC
La región creado por un elemento HTML, los siguientes elementos son creados dentro de la zona de BFC:
* 根元素： 意味着，<html>元素创建的BCF区域，覆盖了网页中所有的元素
* 浮动元素和绝对，固定定位元素
* overflow 不等于 visible的块盒(overflow:hidden)
