Usando o CSS, flotar Propiedade para proxectar esquemas de páxina web
A propiedade CSS é unha propiedade moi importante para o deseño. Permite que posicione os seus deseños de páxina web exactamente como quere que se mostren, pero para usalo debes entender como funciona.
Nunha folla de estilo, a propiedade flotante CSS é así:
.right {float: right; }
Isto di ao navegador que todo coa clase de "dereita" debería estar flotando cara á dereita.
Vostede o asignaría así:
class = "right" />
Que pode flotar coa propiedade flotante CSS?
Non pode flotar todos os elementos nunha páxina web. Só podes flotar elementos de nivel de bloque . Estes son os elementos que ocupan un bloque de espazo na páxina, como imaxes (), parágrafos (), divisións () e listas ().
Outros elementos que afectan ao texto, pero non crean unha caixa na páxina, chámanse elementos en liña e non se poden flotar. Estes son elementos como span (), saltos de liña (), énfase forte () ou cursiva ().
Onde flotan?
Pode flotar elementos á dereita ou á esquerda. Calquera elemento que segue o elemento flutuado fluirá ao redor do elemento flutuado do outro lado.
Por exemplo, se eu flutuando unha imaxe á esquerda, calquera texto ou outros elementos que o seguen funcionarán a volta á dereita. E se eu flutu unha imaxe á dereita, calquera texto ou outros elementos que o seguen flúen a volta á esquerda. Unha imaxe que se coloque nun bloque de texto sen ningún tipo de estilo flotante que se lles aplicará amosarase o navegador para mostrar as imaxes.
Isto adoita ser coa primeira liña do seguinte texto que aparece na parte inferior da imaxe.
Que lonxe van flotar?
Un elemento que foi flutuado moverase cara á esquerda ou á dereita do elemento contedor como pode. Isto resulta en varias situacións diferentes dependendo de como está escrito o seu código.
Para estes exemplos, vou estar flotando un pequeno elemento DIV á esquerda:
- Se o elemento flotante non ten un ancho predefinido, ocupará tanto espazo horizontal como o requirirá e estará dispoñible, independentemente do flutuante. Nota: algúns navegadores intentan colocar elementos ao carón de elementos flotantes cando o ancho non está definido; normalmente o elemento non flotante só proporciona unha pequena cantidade de espazo. Así que sempre debes definir un ancho nos elementos flotantes.
- Se o elemento contenedor é o elemento HTML, o DIV flotante sentarase na marxe esquerda da páxina.
- Se o elemento contedor está contido por outra cousa, o DIV flotante sentarase na marxe esquerda do contenedor.
- Podes anidar elementos flotantes, e iso pode facer que o flotante termine nun lugar sorprendente. Por exemplo, este flotador é un DIV flutuado esquerdo dentro dun DIV flotante dereito.
- Os elementos flotantes sentaranse ao lado do outro se hai espazo no recipiente. Por exemplo, este contedor ten tres elementos de DIV ancho de 100 píxeles flutuados nun contenedor ancho de 400 píxeles.
Incluso podes usar flotadores para crear un deseño de galería de fotos. Pór cada miniatura (funciona mellor cando todas son do mesmo tamaño) nun DIV co subtítulo e os elementos DIV flotantes no contenedor.
Non importa o quão grande sexa a ventá do navegador, as miniaturas subirán uniformemente.
Apagando o flotador
Unha vez que saiba como obter un elemento para flotar, é importante saber como desactivar o flotador. Desactiva o flutuante coa propiedade de CSS. Podes borrar caretas flotantes, flotantes á dereita ou ambas:
claro: esquerda;
claro: certo;
claro: ambos;
Calquera elemento que configure a propiedade clara aparecerá debaixo dun elemento que flota esa dirección. Por exemplo, neste exemplo non se borran os dous primeiros parágrafos do texto, pero o terceiro é.
Xoga co valor claro de diferentes elementos nos teus documentos para obter diferentes efectos de deseño.
Un dos esquemas flotantes máis interesantes é unha serie de imaxes na columna dereita ou esquerda á beira dos parágrafos do texto. Aínda que o texto non teña o tempo suficiente para percorrer a imaxe, pode usar a imaxe clara en todas as imaxes para asegurarse de que aparecen na columna e non á imaxe anterior.
O HTML (repita este parágrafo):
Duis aute irure dolor sed do eiusmod temporal incididunt en reprehenderit in voluptate. Cupidatat non proide, ten que traballar e perda a máquina.
O CSS (para flotar as imaxes á esquerda):
img.float {float: left;
claro: esquerda;
marxe: 5 píxeles;
}
E á dereita:
img.float {float: xusto;
claro: certo;
marxe: 5 píxeles;
}
Usando flotadores para o deseño
Unha vez que entenda como funciona a propiedade flotante, pode comezar a utilizala para definir as súas páxinas web. Estes son os pasos que levo para crear unha páxina web flotante:
- Deseña o deseño (en papel ou nunha ferramenta de gráficos ou na miña cabeza).
- Determine onde serán as divisións de páxina.
- Determine o ancho dos diferentes contedores e os elementos dentro deles.
- Flota todo. Incluso o elemento contedor máis externo flúe cara á esquerda para que saiba onde vai estar en relación ao porto de visualización do navegador.
Sempre que coñeza os anchos (porcentaxes están ben) das súas seccións de deseño, pode usar a propiedade flotante para poñelas onde pertenzan na páxina. E o bo é que non se preocupe o modelo de caixa diferente para Internet Explorer ou Firefox.