html - español - ¿Cómo funciona el margen?

title html español

Question

He proporcionado a continuación el marginfix que es un elemento de nivel de bloque y one y two también son de nivel de bloque, pero estos son flotantes. Esa es la razón por la que están en la misma línea de diseño, pero el marginfix tampoco está flotando, y el elemento de nivel de bloque debe ir debajo del elemento como se muestra a continuación.

+--------------------+                                 +--------------------+
|                    |                                 |                    |
+--------------------+                                 +--------------------+
                        +--------------------------+
                        |                          |
                        +--------------------------+

Pero funciona así.

+--------------------+ +--------------------------+  +--------------------+
|                    | |                          |  |                    |
+--------------------+ +--------------------------+  +--------------------+

Este es el HTML

<div class="wrap">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="marginfix">three</div>
</div>

CSS

.wrap{
  width: 500px;
  background-color: red; 
  position: relative;
  margin: 0 auto;
}
.one{
  width: 200px;
  float: left;
}
.two{
  width: 200px;
  float: right;
}
.marginfix{
  margin: 0 210px;
}

NOTA DE ACTUALIZACIÓN

Alguien puede decir que los marginfix contienen el espacio restante de los elementos flotados. Si es así, ¿por qué no funcionaría si cambiamos el orden del elemento html? Este html no funcionará como se indica arriba.

<div class="wrap">
<div class="one">one</div>
<div class="marginfix">three</div>
<div class="two">two</div>
</div>

Entonces, ¿cómo funciona el valor del margen?

Answer 1

Interacción de márgenes y elementos flotantes.

Demo HTML y CSS: http://jsfiddle.net/audetwebdesign/2Hn7D/

En este ejemplo, .wrap es el elemento primario, que contiene un elemento de bloque con un ancho fijo de 600 px y centrado horizontalmente mediante un método estándar, margin: 0 auto .

Dentro del bloque principal, hay un elemento de nivel de bloque, div.marginfix con algún texto (para fines de ilustración). Como tal, div.marginfix está en flujo normal y en un contexto de formato de bloque. Su ancho se extenderá para llenar el ancho del contenedor padre.

El bloque principal también contiene dos elementos flotados, div.one y div.two , flotados a la izquierda y a la derecha respectivamente, ambos con width: 200px .

Un navegador compatible con CSS seguirá el modelo de formato de bloque CSS para distribuir el contenido de la siguiente manera:

(1) Ignore los elementos flotantes y luego calcule el diseño de los elementos restantes en el flujo ( .marginfix ) ajustando el margen, el relleno, la línea de altura, los elementos en línea y así sucesivamente.

(2) Determine el espacio requerido para colocar los flotadores de manera que el elemento flotante izquierdo esté alineado con el borde izquierdo del elemento primario, el elemento flotante derecho esté alineado con el borde derecho del elemento primario, y ambos tengan sus bordes superiores adyacentes al Borde superior del elemento padre.

(3) Ajuste el ancho de los cuadros de línea (los cuadros imaginarios alrededor del texto en el div niño) según sea necesario para permitir que el texto de los elementos de flujo normal se ajuste alrededor de los elementos flotantes.

Ejemplo básico

En el caso más simple, el texto dentro de .marginfix envuelve los dos elementos flotantes y se extiende a los bordes izquierdo y derecho del elemento padre una vez que el texto ha borrado los flotantes.

Ejemplo 2 - Añadir márgenes

Si agrega márgenes izquierdo y derecho a .marginfix , el ancho del div en flujo se calcula para que sea {ancho del padre - margen izquierdo - margen derecho}, por lo que el texto se limita al centro del diseño. Un efecto similar resultaría del uso de relleno.

Es importante tener en cuenta que el formato del texto en este ejemplo sería el mismo incluso si se eliminaran uno o ambos de los hermanos flotantes.

Ejemplo 3 - Cambiando el orden de los elementos

Cuando se usan flotadores, el orden de los elementos hace una diferencia.

Considere la siguiente variación, coloque .marginfix entre los dos div flotados:

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>

En este caso, el texto de .marginfix se .marginfix alrededor del elemento flotante izquierdo.

Sin embargo, el elemento flotante derecho ahora aparece después del bloque en flujo, y por esta razón, el elemento .two se vacía a la derecha (como se esperaba) y al borde inferior del elemento de nivel de bloque más cercano, en este caso .marginfix .

Cualquier margen o relleno aplicado a .marginfix simplemente extendería la altura del elemento de entrada y el div.two todavía se div.two después de él (vea el Ejemplo 4 ).

Ejemplo 5 - Establecimiento de un nuevo contexto de formato de bloque

Si aplica overflow: hidden a .marginfix , el modelo de formato CSS inicia un nuevo contexto de formato de bloque, lo que significa que .marginfix no se extenderá más allá de los bordes de cualquier elemento flotante adyacente.

En este ejemplo, el texto de .marginfix ya no se ajusta alrededor del elemento flotante izquierdo.

Como antes, el div flotado a la derecha todavía se coloca después de .marginfix ya que .marginfix sigue siendo un elemento de nivel de bloque.

Answer 2

Así es como funcionan los floats : se eliminan del flujo normal de contenido. Si desea forzar que .marginfix siente debajo de los demás, agregue .marginfix{clear: both;} a sus estilos.

Answer 3

Creo que la primera respuesta de Chapurlink tiene sentido, modifico su violín, vea la respuesta,

que funciona como lo ha explicado / esperado, el cuadro blanco es div tres con clear:both

Ver el fiddle

Espero que esto sea en el contexto de su pregunta.

Answer 4

Cuando hace flotar cualquier elemento a la izquierda, los demás elementos van en la misma línea de diseño si no ha borrado los flotantes y es por eso que el marginfix ajuste se establece exactamente después del flotante a la izquierda, incluso si no ha establecido un valor de margen en el margen de marginfix y el resto de los elementos van hacia el borde izquierdo desde la línea (cuando one alcanza one altura) y es probable que two si su one and two no tienen la altura suficiente como marginfix pero aquí ha establecido un valor de margen de margen de marginfix para que permanezca en el mismo pilar.

Juega con este violín

Answer 5

Eso sucedió porque tanto la clase .one como .one fueron .one , dejando un espacio de 100px entre ellos. Ahí es donde se llenará el .marginfix . Si desea que el .marginfix se coloque debajo de ellos y esté alineado en el centro, asigne clear:both; colocarlo debajo de ellos y usar el margin:0 auto; para hacerlo centrado.

Answer 6

Juega con el jsfiddle . He convertido tu código al violín. Y para cada div hay un color de fondo diferente. Juega con varios valores de flotación. Y el cambio en el diseño le resultará claro a partir de los diferentes colores de los cuadros.

inherit
left - floats the box to the left with surrounding content flowing to the right.
right - floats the box to the right with surrounding content flowing to the left.
none (default)

Si no desea que la siguiente casilla se ajuste a los objetos flotantes, puede aplicar la propiedad clear:

clear: left will clear left floated boxes
clear: right will clear right floated boxes
clear: both will clear both left and right floated boxes.

Consulte el tutorial html dog en el diseño de la página para obtener más detalles sobre el diseño usando css

Answer 7

Los flotadores se eliminan del flujo normal de contenido. Cuando aplica flotadores a un div, los márgenes no ven el div flotado como un elemento real que es hasta que se aplica un claro: ambos. ver jsfiddle

.one{
 width: 200px;
 float: left;
 clear: both;
}

.two{
  width: 200px;
  float: right;
  clear: both;
}

.marginfix{
   margin: 0 210px;
}

Ahora suena como si estuvieras tratando de lograr un posicionamiento en el que el marginfix empuja el div hacia el medio. Si ese es el concepto, coloque display: block en marginfix. Ver jsfiddle

.one{
  width: 200px;
  float: left;
}
.two{
 width: 200px;
 float: right;
}
.marginfix{
  margin: 0 210px;
  clear: both;
}

Los márgenes empujan elementos alrededor de un elemento. Dado que los flotadores están fuera del flujo normal, los márgenes empujan desde el borde porque no ve el elemento como un límite. Piense en el límite como un elemento que tiene claro: ambos con flotación también. Ahora lo verá como un elemento.

Aquí está el problema aún más extraño. Cuando los dos flotadores a la izquierda y la derecha tienen despejados, ambos flotan a la derecha y son empujados hacia abajo. Pero si adjunta claro: tanto para marginfix lo empuja hacia abajo como en su primer ejemplo.

Answer 8

re: your edit - la propiedad css "clear" hace que el elemento actual se sitúe debajo de los elementos flotantes que vienen antes en su HTML. Por lo tanto, si cambias tu HTML a lo siguiente:

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>

div class = "one" se "borrará" pero div class "two" no se borrará.

Answer 9

 This is HTML:
 =================

 <div id="container">
    <div id="one"><h1>hello world1</h1></div>
    <div id="two"><h1>hello world2</h1></div>
    <div id="three"><h1>hello world3</h1></div>
 </div>

 CSS
 ====
  #container
    {
        height: 1024px;
        width: 760px;
        position: fixed;
    }

    #one
    {
        margin-left: 10px;
        position: relative;
        border: 2px solid red;
        width: 220px;
    }
    #two
    {
        margin-left: 272px;
        position: absolute;
        border: 2px solid Blue;
        width: 220px;
        float: right;
    }
    #three
    {
        border: 2px solid Green;
        float: right;
        margin-top: -86px;
        position: relative;
        width: 220px;
    }