css - sirve - ¿Cuál es la diferencia entre Float: left vs Display: inline? Mientras que cada elemento en el navegador va a la izquierda por defecto

inline-flex

Question

¿Cuál es la diferencia entre Float vs Display: inline? Por defecto, todo va al lado izquierdo en cada navegador. luego 2 elementos en línea deben ser trabajados igual que float: left.

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

Answer 1

Aunque es demasiado tarde para responder, pero una de las principales diferencias que puedo mencionar aquí es sobre: Clear

En los elementos float , debe Clear sus flotadores, pero en los elementos en inline no se requiere ningún borrado.

Puedes ver un ejemplo en vivo aquí: http://jsfiddle.net/K9PXF/

Y este es un gran artículo sobre flotadores y limpieza: http://css-tricks.com/all-about-floats/

Answer 2

Cada navegador tiene un "flujo". El tipo de flujo emula un procesador de textos en el que los elementos fluyen de izquierda a derecha, de arriba a abajo. Los elementos que no encajan al final de una "línea", se ajustan a la siguiente "línea", por así decirlo.

Los elementos del bloque ocupan la línea completa. Los elementos en línea solo ocupan todo el espacio que necesitan, por lo que otros elementos pueden sentarse junto a ellos en la misma línea. A menos que haya un ancho declarado, eso no ocurre con los elementos de bloque.

Un elemento flotante saca los elementos del flujo normal y los desplaza a la izquierda / derecha. El espacio que ocupaba el objeto antes de flotar está vacío y se colapsa. Si floto dos elementos que ocupan más espacio del que la línea puede contener, uno puede caer a la siguiente "línea".

@Jitendra: mostrar dos tramos en línea los pondrá juntos en el flujo, sí. Aparecerán dos elementos flotantes que no ocupan el espacio de la línea completa para hacer lo mismo. Definitivamente tienen diferentes usos, sin embargo.

Si quisiera que el texto fluyera alrededor de una imagen en un párrafo, flotaría en la imagen que no se usa display:inline . Si quisiera crear un menú horizontal a partir de elementos de elementos de la lista, usaría display:inline , no float .

Answer 3

El flujo de trabajo normal de un navegador es mostrar los elementos de izquierda a derecha, uno cerca del otro (si se trata de elementos en línea) ... cuando una línea termina debido al tamaño de la página web, el navegador vuelve a comenzar para mostrar el Elementos de izquierda a derecha pero en la línea siguiente.

Una directiva "flotante", en un elemento, obliga al navegador a mostrar el elemento fuera del flujo de trabajo normal, en la parte superior izquierda o en la parte superior derecha de la página web.

La directiva "mostrar en línea" hace que los elementos de bloque se muestren en línea, por lo que el navegador administra estos elementos como se explica anteriormente.

EN RESPUESTA A SU PREGUNTA: ¡No! Como he escrito: el flotante: izquierda fuerza cualquier elemento (bloquee o no bloquee), colocado en cualquier línea de una página web, para flotar en el lado izquierdo de la página web ... incluso si la alineación del texto está establecida a derecha"! Si la alineación del texto está configurada a la izquierda, aplicando un flotante: deja a la izquierda que no pasa nada ... en lugar de eso, el elemento se ve forzado a salir del flujo de trabajo normal del navegador, de hecho, por lo general, el margen izquierdo es restablecido

La pantalla: en línea no afecta a los elementos en línea ... si la alineación del texto (del contenedor de elementos) está configurada en "derecha", una pantalla: en línea no flota a la izquierda (aviso, estoy refiriéndose a los elementos en línea) ... porque "display: en línea" le dice al navegador solo que muestre un elemento en la misma línea del flujo de trabajo normal ... entonces, si un elemento está en línea (por ejemplo, un elemento de enlace), Esta propiedad no cambia su comportamiento!

Por lo tanto, el "display: inline" afecta solo a los elementos del "bloque"! Pero incluso en este caso, no flota a la izquierda del elemento de bloque, ¡pero obliga a que el elemento solo se muestre en la misma línea de los otros elementos en línea!

ACERCA DE SU EJEMPLO: Los div (s) son elementos de bloque, el flujo de trabajo normal no está en línea ... por lo que el navegador, de forma predeterminada, los muestra uno debajo del otro , como en este ejemplo:

<div class="purple" style="float:left">Link one</div>
<div class="purple">Link two</div>
<div class="purple">Link three</div>
<div class="purple">Link four</div>

incluso si aplicas un flotador: a la izquierda en la primera división, parece que no pasa nada solo por qué ya está en la esquina superior izquierda ... ¡¿a dónde debería ir de otra forma?

El segundo ejemplo ...

<div class="red" style="float:left">Link one</div>
<div class="red" style="float:left">Link two</div>
<div class="red" style="float:left">Link three</div>
<div class="red" style="float:left">Link four</div>

Cuando aplique un flotador: a la izquierda a div (s) adyacentes, obligue al navegador a mostrarlos fuera del flujo de trabajo normal (¡Como me parece triste, los elementos de bloque aparecen, por defecto, uno debajo de otro!), Flotando los div (s) en el lado izquierdo ... en este caso uno cerca del otro. Observe que, como me siento triste, el margen se restablece ... porque los div (s) no están en una línea ordinaria del navegador, sino que solo flotan en la izquierda ... otra vez, ¡fuera del flujo de trabajo normal!

De hecho, el siguiente ejemplo confirma lo que lamento en teoría ... la pantalla: en línea obliga al navegador a mostrar elementos de bloque (div) en la misma línea, respetando su margen y relleno predeterminados :

<div class="brown" style="display:inline">Link one</div>
<div class="brown" style="display:inline">Link two</div>
<div class="brown" style="display:inline">Link three</div>

Pero la pantalla: en línea no obliga a los elementos a flotar en la izquierda, sino solo a ser administrados como elementos en línea , para aclarar este concepto, observe la gran diferencia entre los dos ejemplos a continuación.

PRIMERO:

<div style="width:800px; text-align: right;">
<div class="brown" style="display:inline">Link one</div>
<div class="brown" style="display:inline">Link two</div>
<div class="brown" style="display:inline">Link three</div>
<div class="brown" style="display:inline">Link four</div>
</div>

SEGUNDO:

<div style="width:800px; text-align: right;">
<div class="brown" style="float:left">Link one</div>
<div class="brown" style="float:left">Link two</div>
<div class="brown" style="float:left">Link three</div>
<div class="brown" style="float:left">Link four</div>
</div>

ACERCA DEL ANCHO: la pantalla: en línea aplicada en un elemento de bloque sin un ancho fijo, hace que el ancho se contraiga al valor mínimo (ancho del contenido + relleno), porque este es el comportamiento normal de un elemento en línea.

El elemento div, por defecto, tiene un ancho del 100% ... así que, cuando se aplica un flotante: el ancho de la izquierda se establece en el 100%, pero el flotante de la izquierda obliga al navegador a administrar y mostrar su ancho en una forma poco ordinaria! En este caso no hay una regla general, ¡cada elemento tiene un comportamiento diferente!

Answer 4

Hay dos tipos de formato: nivel de bloque y en línea. El formato a nivel de bloque se realiza con un modelo de cuadro que utiliza un conjunto de reglas para el diseño.

Formato en línea es lo que normalmente recibe el texto. Significa, informalmente, que las cosas se llenan en líneas.

A veces, desea cambiar el formato predeterminado que obtendrá un elemento. Algo que normalmente puede tener un formato de nivel de bloque que tal vez desee tratar como en línea. Un div que contenga contenido como el gráfico de una clave, por ejemplo, podría necesitar mostrarse dentro de una oración. Uno podría entonces anular su formato con display:inline . Las imágenes ya se muestran "Inline"

La especificación CSS tiene una definición sorprendentemente simple para flotadores:

Un flotador es un cuadro que se desplaza hacia la izquierda o hacia la derecha en la línea actual. La característica más interesante de una caja flotante (o "flotada" o "flotante") es que el contenido puede fluir a lo largo de su lado

Así que un flotador es una especie de tercera categoría de modelo de formato. Se relaciona con inline como, de manera informal, un modelo de diseño.

Answer 5

Siempre recuerdo lo que es flotar recordando el <img align="left" /> que actúa de manera muy similar a float:left . Básicamente, flota, flota la imagen a la izquierda y envuelve el texto u otro contenido a su alrededor. Sin float se mostraría como una pieza de texto.

Float funciona de manera similar a otras herramientas de documentos donde puede hacer que el texto se ajuste alrededor de la imagen (o elemento HTML).

Answer 6

Vaya a w3schools e intente esto en su editor (porque los enlaces de imagen son completamente suyos, o puede reemplazar la fuente de su URL de origen de imagen) Luego cambie el tamaño de las ventanas.

Lo que notará es ... Que en el caso de visualización: en línea, el texto se dividirá en palabras y algunas palabras del texto aparecerán en la siguiente línea. Aunque en el caso de flotar: a la izquierda, todo el texto se mostrará como un elemento y no se dividirá.

El propósito de la línea es simplemente mostrar todo en una LÍNEA, aunque el propósito de flotar es organizar los ELEMENTOS alineados con alguna dimensión.

<!DOCTYPE html>
<html>
<head>
<style>
.thumb
{
float:left;
}
.thumbnail
{
display:inline;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<br>Below are the inline elements<br>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<p class="thumbnail">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<br><br>Below is the floating elements<br><br>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
<p class="thumb">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

Answer 7

display: inline significa que el elemento actúa como un <span> lugar de un <div> : es decir, no es un bloque.

Los elementos que se flotan no están en el flujo normal del documento. Here hay una buena descripción.

ETA:

Prueba este código. Si no puedes ver la diferencia, entonces no puedo ayudarte.

<html>
<head>
<style type="text/css">
p.inlinel {display:inline; width: 4em;}
p.inliner {display:inline; width: 4em; text-align: right;}
p.floatl {width: 4em; float:left;}
p.floatr {width: 4em; float: right;}
</style>
</head>
<body>
<p class=''inlinel''>The is an inline paragraph with lots of words.</p>
<p class=''inliner''>The is an inline paragraph with lots of words.</p>
<br/><br/>
<p class=''floatl''>The is a left floated paragraph with lots of words.</p>
<p class=''floatr''>The is a right floated paragraph with lots of words.</p>
</body>
</html>

Answer 8

display:inline significa que un elemento se "apilará" junto a otros elementos, como imágenes, vanos o la etiqueta en negrita. A esto se opone el elemento de nivel de bloque ( display:block ) que ocupa un espacio horizontal, implica un salto de línea y no se sienta uno al lado del otro, como divs, párrafos o tablas.

Piénsalo de esta manera...

<img /><img /><img />
<div />
<div />
<div />

Float es una noción completamente diferente, moviendo el contenido hacia la izquierda o hacia la derecha. De forma predeterminada, un elemento flotante está en línea y los elementos flotantes se apilarán uno junto al otro.

Todos estos tipos de elementos forman parte del flujo normal de documentos, lo que significa que ocupan "espacio" en el diseño que no se puede compartir.