Problema de BFC en el diseño css

1. Preguntas de la entrevista: distancia bilateral (márgenes superpuestos)

1. ¿Qué es la superposición de márgenes?
2. ¿En qué circunstancias se producirán márgenes superpuestos?
3. ¿Cómo resolver los márgenes superpuestos?

Superposición de márgenes : si se establecen los márgenes de ambos cuadros, en la dirección vertical, los márgenes de los dos cuadros se superpondrán y el resultado final se mostrará en la página con el valor absoluto mayor.

Hay dos casos de márgenes superpuestos:

1. Los márgenes de la relación entre padres e hijos se superponen

Relación padre-hijo, si el elemento hijo tiene un margen, el elemento padre también tendrá un margen sin convertir el elemento padre en un BFC

Agregue desbordamiento: oculto
al elemento principal para que el elemento principal se convierta en BFC y no haya márgenes con los elementos secundarios

<style>
.out {
     
     
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
     
     
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

2. Superposición de relaciones entre hermanos en el mismo nivel:

Los márgenes exteriores de los elementos del mismo nivel se superpondrán en la dirección vertical, y el margen exterior final será el valor absoluto mayor de los dos.

  <style type="text/css">
            .fat {
     
     
                background-color: #ccc;
            }
            .fat .child-one {
     
     
                width: 100px;
                height: 100px;
                margin-bottom: 50px;
                background-color: #f00;
            }

            .fat .child-two {
     
     
                width: 100px;
                height: 100px;
                margin-top: 20px;
                background-color: #345890;
            }
        </style>
   <section class="fat">
        <div class="child-one"></div>
        <div class="child-two"></div>
    </section>

Puede configurar overflow: hidden; para resolver el problema de los márgenes superpuestos agregando elementos vacíos o elementos de pseudo-tipo

2. Responda a la superposición de márgenes — BFC

¿Qué es BFC?

BFC significa " 块级格式化上下文", BFC es un entorno de diseño independiente, que protege los elementos internos de influencias externas y no afecta a los externos. BFC en sí es un método de diseño CSS, pero podemos usarlo para resolver el problema del plegado de márgenes BFC no se creó específicamente para resolver este problema;

¿Cómo activar BFC?

Cuando el valor del atributo de la caja es este, la caja a la que pertenece generará BFC.

• desbordamiento: automático / oculto;
• posición: absoluta / fija;
• flotador: izquierda / derecha;
• pantalla: inline-block / table-cell / table-caption / flex / inline-flex

También puede utilizar el método de eliminación:

El valor de desbordamiento no es visible;
el valor de posición no es estático o
el valor de flotación relativa no es ninguno
El valor de visualización es inline-block o table-cell o flex o table-caption o
inline-flex

¿El principio de BFC? (No hables de eso en la entrevista, pero entiéndelo)

1. Las cajas dentro del BFC se colocarán una a una en dirección vertical. La superposición de márgenes también se produce en la dirección vertical.
2. BFC es un contenedor independiente en la página. Los elementos secundarios dentro del contenedor no afectarán a los elementos externos y el exterior no afectará al interior.
3. El área de BFC no se superpondrá con el flotador.
4. Al calcular la altura del BFC, también se cuentan los elementos flotantes.

Aplicación de BFC

1. Puede usarse para diseño adaptable

Usando este principio de BFC, se puede realizar un diseño de dos columnas, con ancho fijo a la izquierda y adaptable a la derecha. No se afectarán entre sí, incluso si las alturas no son iguales.

Agregar desbordamiento: oculto a la derecha; conviértalo en un BFC para eliminar la influencia de la izquierda externa debido a la flotación

<!-- BFC不与float重叠 -->
<section id="layout">
        <style media="screen">
          #layout{
     
     
            background: red;
            height: 200px;
          }
          #layout .left{
     
     
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
          }
          #layout .right{
     
     
            height: 100px;
            background:green;
            overflow: hidden;
          }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

2. Puede borrar el flotador:

agregar elemento padre overflow:hidden/auto, cambiar BFC

<!-- BFC子元素即使是float也会参与计算 -->
      <style>
        #out{
     
     
          background: red;
          border: 1px solid black;
          overflow: hidden;
        }
        #inner{
     
     
          float: left;
           width: 200px;
           height: 200px;
           background-color: blue;
        }
      </style>
    <div id="out">
        <div id="inner">我是浮动元素</div>
    </div>

3. Resuelva la superposición de márgenes verticales:

Ver caso arriba