1. Definición de BFC

BFC (contexto de formato de bloque), es decir, contexto de formato de nivel de bloque , es un área de representación en la página y tiene su propio conjunto de reglas de representación,

1. Los cuadros interiores se colocarán uno tras otro en dirección vertical
2. Para el mismo BFC, los márgenes de dos cuadros adyacentes se superpondrán, independientemente de la dirección.
3. El margen izquierdo de cada elemento toca el borde izquierdo del bloque contenedor (de izquierda a derecha), incluso para elementos flotantes
4. El área del BFC no se superpone con el área del elemento de el flotador
5. Al calcular la altura del BFC, los elementos secundarios flotantes también participan en el cálculo
6. BFC es un contenedor independiente aislado en la página, y los elementos secundarios dentro del contenedor no afectarán a los elementos externos, y viceversa

BFCEl propósito es formar un espacio que sea completamente independiente del mundo exterior, de modo que los elementos secundarios internos no afecten a los elementos externos.

En la etapa de diseño de página, el diseño de página a menudo se confunde debido a problemas de BFC, como el problema de fusionar márgenes, se pierde la altura de los elementos y el diseño de dos columnas no logra la autoadaptación.

2. Condiciones para activar BFC

1. Elemento raíz, es decir, elemento HTML
2. Elemento flotante: el valor flotante es izquierda, derecha
3. El valor de desbordamiento no es visible, es automático, desplazamiento, oculto
4. El valor de visualización son todos los valores excepto ninguno, en línea- block, inltable-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid
5. El valor de posición es absoluto o fijo

3. Problema de combinación de márgenes

1. Fusión de margen a nivel de hermano
       Razones para la fusión: establezca un margen inferior para los elementos hermanos y establezca un margen superior al mismo tiempo, lo que da como resultado la fusión de márgenes y las
       soluciones de fusión:
           1. Establezca márgenes solo para uno de los elementos hermanos
           2. Establezca el margen inferior Active BFC para el margen exterior
               1.display:inline-blick/flex
               2.position:absolute/fixed
               3.float:left
           3. Establezca un elemento principal para el elemento hermano superior y habilite
               el desbordamiento de BFC oculto/automático para el elemento principal
2. Margen externo de nivel principal-secundario El motivo de la fusión y la fusión: establezca una solución de fusión de
margen        en la misma dirección para los elementos principal y secundario al mismo tiempo Solución:            1. Establezca el atributo de relleno para el elemento principal            2 Establecer el borde del borde para el elemento padre

4. Escenarios de aplicación de BFC

1. Evite la superposición de márgenes

Cuando se establece el cuadro hermano y se establece un margen inferior para el elemento hermano y se establece un margen superior al mismo tiempo, se produce una fusión de márgenes

        <style>
            div:first-child {
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 10px;
            }
            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
            }
        </style>
        
        <div class="cube"></div>
        <div class="cube"></div>

Hay un problema de márgenes superpuestos. Originalmente, la altura del cuerpo debería ser 230 (la altura de la primera caja es 100 + el margen de la primera caja es 20 + la altura de la segunda caja es 100 + el margen de la el segundo cuadro es 10), que debe resolverse en este momento Para este tipo de problema, debe abrir BFC

Al abrir el BFC para el segundo cuadro div,

            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
                display: inline-block;
                /* position: absolute; */
                /* float: left; */
            }

Ocurrirá la siguiente situación. El uso de estos tres métodos para abrir BFC agregará nuevos estilos y bordes . En este momento, la altura del cuerpo es de 234 px, lo cual no se recomienda.

Mejor método: cuando le damos al primer cuadro un cuadro principal y activamos el cuadro principal para generar un BFC, entonces los dos divs no pertenecen al mismo BFC y no habrá ningún problema de superposición de márgenes.

         <style>
            .cube {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-bottom: 10px;
            }
            .cube1:last-child {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-top: 20px;
            }
            .container {
                /* 开启bfc属性  */
                overflow: hidden;
            }
        </style>

        <div class="container">
            <div class="cube"></div>
        </div>
        <div class="cube1"></div>

2. Claro flotante

        <style>
            .parent {
                border: 10px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                background-color: blue;
                /* 浮动效果 */
                float: left;
            }
        </style>

        <div class="parent">
            <div class="child"></div>
        </div>

El efecto es el siguiente: cuando se calcula la altura del elemento principal principal, la altura del elemento secundario secundario no se calcula.

Cuando generamos un BFC para el elemento principal, el elemento principal también calculará la altura del elemento secundario flotante al calcular la altura.

            .parent {
                border: 10px solid red;
                /* 开启bfc overflow hidden auto */
                overflow: hidden;
            }

El efecto de la página es el siguiente, pantalla normal

Pero cuando usamos otros métodos para generar BFC, el estilo cambiará y no cumplirá con los requisitos. El efecto es el siguiente

3. Implemente un diseño de dos columnas

Establezca el ancho a la izquierda, adaptativo a la derecha y habilite BFC a la derecha

	<style>
		.left{
			width: 300px;
			background-color: red;
			float: left;
		}
		.right{
			background-color: blue;
			/* 开启bfc */
			overflow: hidden;
		}
	</style>
    
    <div class="left">左侧定宽</div>
	<div class="right">右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
	</div>

Se implementa un diseño de dos columnas y el lado derecho es adaptable

4. Implemente un diseño de tres columnas

Idea: fije el ancho en los lados izquierdo y derecho, dele al cuadro izquierdo float:left; dele al cuadro derecho float:right, y encienda BFC para el cuadro del medio, para obtener el ancho fijo izquierdo y derecho, y el efecto de la autoadaptación en el medio

        <style>
            /* 三列布局 左侧右侧定宽 中间自适应 */
            .left,
            .right {
                width: 100px;
                height: 50px;
                background-color: red;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .center {
                height: 100px;
                background-color: blue;
                /* 开启bfc */
                overflow: hidden;
            }
        </style>
            
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>

Entrevistador: Hable sobre su comprensión de BFC y el problema de la fusión de márgenes