¿Posicionamiento float, fxed o relative?¿% ó px?

[josejump06]

Hola sigo con mis preguntas.

Mi profesor de 2SMR nos obligo ha hacer la pagina completa en float y clear both ademas con los tamaños en % sobre todo para que fuera adaptable, pero yo me pregunto esto siempre es bueno o es mejor variar con otros tipos como posicionamiento fijo o relativo. Y voy mas halla ¿que hay de las cajas flex? que solo se comento por encima en clase.
¿Que opinais?

Gracias
P.D. al final con toda la info que saque de aquí voy a poder hacer un pedazo tuto. Jajajaja (broma)

[Zeromm]

que un profesor te oblige a usar floats y a meter código html para "limpiarlos" (que eso son los "clear: both") deja en evidencia que no le gusta mucho los códigos optimizados. La forma más limpia de limpiar un float es con "overflow: hidden", ya que meter codigo html para "solucionar" problemas del css es poco "elegante".

Lo de "flex". Viendo que tu profesor se refiere a limpiar floats con "clear:both" en vez de "clearfix" (que es lo mismo pero no funciona en navegadores antiguos), también demuestra que está pendiente de navegadores desactualizados como el ie8, por lo que no le gustará nada que trabajeis con cosas actuales como "flex" (seguro que en algún proyecto os habla de usar Flash xDD). Lo que realmente sería útil es que hiciera al revés. Que os obligara a hacer una página con "flexbox" y os explicara de pasada los floats.

[josejump06]

Entonces para que yo me entere.
Es mejor meter flex que float ¿no?
Y lo de limpiar con overflow:hidden eso va a hacer que los limites de la caja desaparezcan a medida que se redimensione la pagina pero tampoco va quedar muy bien ¿no?
No me quedo muy claro lo de sustituir overflow:hiden por clear:both, lo veo mas facil de entender con clear.
Gracias amigo por instruirme

[GekoDH]

Yo no entiendo la relación que se está haciendo aquí entre los clear de los float y el clearfix.

A ver, cuando a un float le das "clear:both" lo que hace eso es evitar que haya otros elementos float a sus lados, es decir, imagínate que tienes dos float colocados horizontalmente, si a uno de ellos le das "clear:both" el segundo se bajará ya que acabas de indicar que no puede tener floats a su lado.

Por el contrario el "overflow:hidden" es un clearfix para evitar que un elemento padre cuyos hijos son floats colapse (un elemento float no forma parte del flujo de la web, y de ahí que su padre no los "detecte" y colapse como si estuviese vacío), con la propiedad "overflow:hidden" aplicada al padre, este no colapsa y se estirará lo necesario para envolver a sus hijos. Hay que tener en cuenta que este no es el comportamiento normal de overflow:hidden, que sirve para que si algo no cabe en el contenedor simplemente no se muestre, pero para estas cosas funciona así, no le busques explicación porque creo que no la tiene.

La alternativa a posicionar mediante floats es posicionar mediante "inline-block", dandole esa propiedad a un elemento block (div por ejemplo) puedes conseguir que haya divs unos al lado de otros pero se sigan comportando como blocks. En este caso sí que podrías usar relative/absolute/fixed para afinar su posición ya que están en el flujo de la web.

Por último lo del flex. De esto no tengo repajolera idea porque se supone que es una propiedad que aun no está muy soportada por navegadores y digamos que es el futuro, próximo, eso sí, pero de momento se usa poco. Más info sobre el flex aquí: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

[pzin]

Lo del clear es para lo mismo, añadido a otro elemento consigues el mismo efecto. Lo malo, como ya dijeron, es que tienes que tocar el documento, cosa fea. Entonces se usa overflow. Ambos son una forma de hacerun clearfix. El primero es más viejo, este último el más usado. En cualquier caso también está el micro clearfix, que no da problema alguno.

Aunque en muchos manuales dice. que flotar elementos los saca del flujo del HTML, yo pienso que es un error. Siguen estando dentro del flujo natural, sino, con un clearfix, no haría nada y además siguen interactuando entre ellos y con su contenedor, exceptuando en la altura. Y eso se arregla simplemente forzando el cálculo de la altura con overflow, que es lo mismo que no flotar un elemento al lado de otro y que coja la altura sobrante del primero (porque fuerza el cálculo de su tamaño para saber dónde ocultar el contenido, pero claro, no oculta porque no hay dimnesiones definidas para ello).

Y la alternativa de flotar no es poner elementos en linea. Hay más situaciones en las que no se pueden realizar las mismas cosas que en las que sí. De hecho sólo se me ocurre una en la que puede considerarse una alternativa (que además causa otros problemas).

[GekoDH]

Iniciado por pzin

Lo del clear es para lo mismo, añadido a otro elemento consigues el mismo efecto. Lo malo, como ya dijeron, es que tienes que tocar el documento, cosa fea. Entonces se usa overflow. Ambos son una forma de hacerun clearfix. El primero es más viejo, este último el más usado. En cualquier caso también está el micro clearfix, que no da problema alguno.

El clear al que te refieres es el "<br clear="all"/>", ¿no? Es que el clear:both no tiene nada que ver con los clearfix, creo yo. Corregidme si me equivoco.

Iniciado por pzin

Y la alternativa de flotar no es poner elementos en linea. Hay más situaciones en las que no se pueden realizar las mismas cosas que en las que sí. De hecho sólo se me ocurre una en la que puede considerarse una alternativa (que además causa otros problemas).

Yo tenía entendido que el posicionamiento se podía hacer con floats o con inline-blocks, me dejas roto al decir que no se puede lograr lo mismo porque cada vez hay más gente que recomienda usar los floats lo mínimo posible para posicionar y más para lo que fueron creados (que el texto envuelva una imagen), ya no sé que pensar, la verdad :(

De todas formas yo por el momento casi todo lo que he hecho con floats lo he conseguido hacer también con inline-blocks, tanto menús horizontales como posicionar elementos block varios por la página, aunque claro que yo soy novato y todavía no he hecho nada demasiado complejo.

[pzin]

Realmente clear: all no existe. Así que como sólo hay dos posibles lados para afectar al limpiado, supongo que te refieres a both (ambos). Y lo que hace eso es evitar que puedan haber elementos flotados a ambos lados. De ahí que se llama clearfix. Las tres técnicas se les denomina clearfix.

Y el posicionamiento como tal sólo se puede conseguir con position. En cualquier otro caso el posicionamiento dependerá de otros elementos. Tal vez sea un error de concepto en el lenguaje. Si es poner una cosa al lado de otra, puedes flotar, usar inline, inline-block, columnas CSS, flexbox, usar table/table-cell y hasta posiciones absolutas, relativas o fijas.

Hay muchas formas. Pero muchas veces no son alternativas, porque son o causan comportamientos diferentes. Tú mismo pones el ejemplo de que float fue pensando para rodear el texto como en una revista (muy cierto), pero eso no puedes hacerlo con inline-block. Por eso, hay form diferentes, pero muchas veces hay una ideal. Flexbox tampoco es la panacea y no viene a sustituir nada, sino a añadir más posibilidades.

[GekoDH]

Tienes toda la razón, además acabo de ver que el clear se le aplica al br, que al ser un salto de línea y decirle que limpie a ambos lados se situará abajo de todo. Una cosa más que aprendo en este foro, aunque en este caso no la usaré porque el overflow:hidden y el típico clearfix de añadir un contenido vacío al final con clear:both me gustan más y al parecer son más correctas.

Todo correcto, un saludo.

[pzin]

Hace unos años se viene usando esta técnica: http://nicolasgallagher.com/micro-clearfix-hack

Es más limpia que el clearfix clásico (añadir un elemento) y menos problemática que el cleardix usando overflow (no puedes poner cosas por fuera).

Tal cual, simplemente añades al elemento que quieras clearfixear. Por ejemplo:

Código HTML:

<section id="articles" class="brand_colors cf">
 

[GekoDH]

Iniciado por pzin

Hace unos años se viene usando esta técnica: http://nicolasgallagher.com/micro-clearfix-hack

Es más limpia que el clearfix clásico (añadir un elemento) y menos problemática que el cleardix usando overflow (no puedes poner cosas por fuera).

Tal cual, simplemente añades al elemento que quieras clearfixear. Por ejemplo:

Código HTML:

<section id="articles" class="brand_colors cf">
 

Me lo guardo