Float CSS: descrición, propiedades

Float - unha das funcións básicas da lingua CSS (Cascading son as follas de estilo - o formato en cascada). Esta linguaxe xa existía desde 1996 e aínda segue a se desenvolver. Polo momento, os desenvolvedores teñen usado a terceira versión do CSS. Con linguaxe de programación CSS pode crear unha fermosa e agradable sitio que non aparecerá desactualizados ou incómodo para o usuario, mesmo se non usar JavaScript. posibilidades modernas da terceira versión da licenza.

Ademais, os desenvolvedores poden usar as opcións máis cómodo de formato, como Flexbox ou Posición para cambiar o elemento de espazo na web, pero as primeiras cousas primeiro. Para comezar a entender as vantaxes e desvantaxes Float propiedades.

CSS Float - por que é necesario?

Float - propiedade para elementos de posicionamento. Todos os días, pode ser visto nas páxinas de xornais e revistas, mirando para as imaxes eo texto, que é moi ordenadamente envolve-los en todo. и CSS при использовании функции Float должно произойти то же самое. No mundo do código HTML e CSS usando a función Float debe acontecer o mesmo. Pero paga a pena lembrar que a edición de imaxe non é o principal obxectivo desta función. Pode ser usado para crear o sitio popular de elementos do sitio en dúas, tres, catro columnas. De feito, a propiedade Float CSS úsase para practicamente calquera html-elemento. Coñecer os conceptos básicos de edición dos elementos de deseño usando a función de Float, e, a continuación, a propiedade, para crear calquera deseño do sitio web non será difícil.

Programas especiais DTP ás veces pode ignorar as imaxes, e pasar por riba deles. cousas semellantes suficientes ocorrer e deseño web, só coa luz do texto, en vez de subir na imaxe aparece (se usa incorrectamente Float propiedades) xunto ou baixo ela, pero non sempre que precisa de un creador.

CSS Descrición float da propiedade

De feito, a capacidade de usar a propiedade Float é un bo trunfo para calquera Deseño Web. Pero, desgraciadamente, a falta de comprensión de como funciona pode levar a colisións e outros elementos das tristezas da web deste tipo. Anteriormente tamén tales situacións ocorren por mor de erros nos navegadores. Agora o segredo de como usar correctamente a propiedade Float abrirase, e sen problemas con el non debe ser maior.

Nós Float propiedade ten catro valores:

• Float: herdar;
• Float: right;
• Float: left;
• Float: none;

Para aqueles que saben inglés, os valores dos parámetros Float propiedade debe ser clara. Pero para aqueles que non saben, pode traer un pouco de explicación. Parámetro: left; El move o corpo do elemento na esquina máis extremo esquerdo do elemento pai. O mesmo acontece (só para o outro lado) cando bcgjkmpjdfybb parámetro: right; . Valor: herdar; ordena o elemento para asumir a mesma configuración que a do pai. Tales elementos chamados neno aínda, como están situados directamente no código HTML-no pai. Unha propiedade: none; Permite que o elemento a non interromper o fluxo normal do documento, que é definido por defecto para todas as partes do código.

Como Float traballo?

propiedade float CSS funciona moi simplemente. Todo o que se describe máis arriba, se pode facer sen moita dificultade. Despois diso, todo vai ser tan fácil. Pero antes de continuar a estudar propiedades flotador, paga a pena un pouco de ollar para a teoría. Cada sitio é un elemento do bloque. É doado ver que abrindo a consola en Google Chrome, premendo Ctrl + Maiús + J. texto, título, imaxe, ligazóns, e todos os outros compoñentes do sitio aparecerá bloques, só diferentes tamaños. Inicialmente, todos estes bloques están seguindo uns a outros. Como se mostra no seguinte exemplo, a cadea de código ir un despois do outro, e así eles parecen ser estrictamente un detrás do outro.

Iso é chamado de fluxo normal (fluxo normal). Cando todo tipo bloques caen dentro do outro (corpo sen cruzar elementos) verticalmente. Inicialmente, todo o contido das páxinas web situadas deste xeito. Con todo, cando se utiliza, por exemplo, as propiedades CSS Float elemento de linguaxe Esquerda deixa a súa posición natural na páxina e móvese cara a esquerda. Este comportamento leva á colisión inevitable con aqueles elementos que permanecesen no curso normal.

Noutras palabras, os elementos son, en vez posicionado vertical, son agora adxacentes un ao outro. Se o elemento pai é espazo suficiente para que pode acomodar dous nenos dentro, a colisión non ocorrer, pero se non, a imposición dun obxecto a outro é inevitable. É moi importante para lembrar para a comprensión das propiedades CSS float.

función clara para resolver problemas

Nós Float caracteriza un corazón cada - clear. Xuntos, eles - non derramar auga. Ambas estas características se complementan e facer o creador feliz. Como mencionado arriba, as células veciñas saír do seu curso normal e tamén comezar a "flotar" como o elemento ao cal foi utilizada a propiedade Float (por exemplo, CSS Float Top). Como resultado, en vez de un elemento flotante recibe dous, e non no lugar onde tiñan intención de organizar o creador. A partir dese momento está só comezando os problemas.

No Borrar función ten cinco valores:

• : Esquerda;
• : Dereito;
• : Both;
• : Inherit;
• none;

Por analoxía, podemos entender cando é mellor usar a función Limpar. Se escribimos unha liña na Float código: right; (CSS-code é destinado), a función debe ser clara: dereito;. As mesmas propiedades das rochas e float: left; que pode complementar Clear: left; . Ao escribir código Clear: both; verifícase que o elemento ao cal ela é aplicada, esta función será a continuación dos elementos aos que aplicados función do flotador. Herdar leva configuración do elemento pai, pero ningún non fai calquera cambio á estrutura do sitio web. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Se entender como o Float e funcións claras, pode escribir un HTML orixinal e inusual eo Float-código CSS, o que fará o seu sitio único no seu xénero.

Usando Float para crear columnas

Flotar característica especialmente útil ao crear columnas na web (ou a localización do contido CSS Float no centro da páxina web). Este código é o máis práctico e cómodo, entón ten que considerar varias opcións para crear o modelo de costume local que consiste en dúas columnas. Por exemplo, ter un sitio estándar con contido da barra de navegación da esquerda (barra de navegación) á dereita, cabeceira e pé. O código parécese isto:

Agora, necesitamos entender o que está escrito aquí. O elemento pai en que a parte principal do código HTML se chama un contedor (recipiente). Permite que para evitar os elementos, que se aplica función Float para estender en diferentes direccións. Se non fose, entón eses elementos teñen flutuando ata os límites do navegador.

A continuación, no código e ir #navigation #content. Estes elementos son usados función do flotador. #content enviado á esquerda e á dereita e #navigation. É necesario crear un sitio web con dúas columnas. Asegúrese de especificar o ancho, de xeito que os obxectos non se sobrepoñen uns ós outros. Pode especificar o ancho e porcentaxe. Entón, aínda máis cómodo que en píxeles. Por exemplo, o 45% a 45% e #content para #navigation, e os restantes 10% para dar marxe propiedade.

Propiedade da Clear, que está #footer, non segue #navigation rodapé e #content, pero deixa ao mesmo lugar onde estaba. O que pode ocorrer? Se non especifica Borrar propiedade? Neste #footer código simplemente ir para arriba e estará baixo #navigation. Isto acontece debido ao feito de que #navigation espacio suficiente para acomodar máis dun elemento. Neste exemplo ilustrativo é claramente visible como as propiedades Clear Float e se complementan.

Problemas que pode atopar ao escribir código

Os exemplos anteriores son simples. Pero con eles pode causar problemas. Xeralmente, en realidade, unha morea de problemas inesperado pode ocorrer a Float función. Non importa o quão raro, pero os problemas non adoitan ocorrer con CSS e un código HTML. O lugar onde o elemento con función de flotación nun código HTML afecta directamente o traballo final. A fin de evitar distintos tipos de dificultades, é mellor ir con regras simples - elementos de posicionamento Float función do primeiro código. Case sempre funciona e para minimizar o seu comportamento inesperado.

choque dos elementos

Colisión ocorre cando o elemento pai contén múltiples neno non pode acomodar todas elas, e que se sobrepoñen uns ós outros. Acontece aínda que os elementos poden non aparecer e desaparecer a partir do sitio web. Este non é un navegador erro, e espera-se eo comportamento adecuado dos elementos con función de flotación.

Debido ao feito de que estes elementos son inicialmente no curso normal, e navegador de propiedade Float entón é roto pode eliminar-los do local. Pero non se desespere, porque a solución é simple e clara - usar cear propiedade. É posible que todos os camiños para saír deste problema, o uso do Clear é o máis eficaz.

Pero o problema da colisión de elementos da páxina web pode ser resolto doutro xeito. Hai polo menos dous xeitos:

• Coloque o uso da función;
• aplicación Flexbox.

función posición é moitas veces unha boa alternativa para Float CSS. No centro da páxina web no caso da posición de aplicación é mellor para colocar a imaxe. Se os valores debidamente aplicados: absoluta e: Relative, os elementos caer no lugar, e non se sobrepoñen uns ós outros.

Análise posición e código de función Float

и CSS Float заменить на Position. Debe tratar máis coa forma en HTML e CSS Float substituído por posición. En realidade, é moi sinxelo. Imos dicir que hai un elemento #container e #div.

#container {

Ancho: 40%;

float: left;

marxe: 10px;

}

#div {

Ancho: 40%;

float: right;

marxe: 10px;

}

#footer {

clear: both;

}

Neste exemplo, o uso de funcións no segundo recipiente (CSS Div) do flotador vai axudar a crear un sitio de patrón de dúas columnas. Nunca se esqueza o Limpar función. Sen el só así como elementos enriba uns dos outros.

Entón, como cambiar o CSS e Float código para usar postion? Moi simple:

#container {

Ancho: 40%;

Posición: relativa;

marxe: 10px;

}

#div {

Ancho: 40%;

Posición: relativa;

marxe: 10px;

}

Neste caso #container #div e tomar a posición necesaria do creador no elemento pai. A principal cousa? poñer #div e #container un elemento pai, que corresponderá ao seu tamaño.

Flexbox - esta función substituirá CSS Float?

Flexbox - o xeito máis avanzada para crear sitios no momento, entón esa función non está soportada por versións anteriores de navegadores. Este feito non ser descontado, para usuarios con versións máis antigas de navegadores non poderá ver a versión correcta do sitio web.

Flexbox non é unha propiedade, como un módulo separado. Polo tanto flexbox soporta un número de propiedades, que traballan só con el. Ademais, a función de exhibición, que ten tres parámetros de liña, bloque e en liña-bloque en flexbox existe só un cable flexible de fluxo.

Como é que Flexbox?

Esta tecnoloxía axuda o creador para aliñar facilmente os elementos horizontal e vertical. Flexbox tamén pode cambiar a dirección ea orde dos elementos de visualización. Nesta tecnoloxía, hai dous eixes: eixe principal eixe e transversais, en torno ao cal toda a Flexbox construídas. Tamén elimina o Float efecto e funcións claras. El constrúe o sistema no código, que usa unha única da súa propiedade, polo que, por desgraza, non ser capaz de replicarse en células de outras propiedades, tales como Float e posición. E sería moi útil, xa que, como mencionado arriba, Flexbox só funcionan en versións máis recentes de navegadores.

Vale lembrar que na posición final, Flexbox Float e facer o mesmo - crear un deseño inusual e orixinal do seu sitio. Cada versión do discutido no artigo faino na súa propia maneira, e por iso ten vantaxes e inconvenientes. Ademais, resulta que a función Float nalgún lugar perfecto (por exemplo, no lugar cunha estrutura simple), pero en algún lugar mellor usar a posición ou Flexbox.

Erro Marxe dobre

Con todo, ás veces, por desgraza, cada problemas creador non xorden a partir do código escrito, con erros e dalgunha forma específica navegador. Por exemplo, en Internet Explorer, hai un erro, que se chama Bug Marxe dobre. El multiplica parámetro marxe para dous, resultando no desprazamento de elementos do sitio web da fronteira navegador. Para evitar isto, é suficiente para indicar a porcentaxe do parámetro de marxe. Normalmente, este erro ocorre cando o valor do punto Marxe Float y e propiedades.

#div {

float: left;

-margem esquerda: 10px;

}

Este código cambiará o elemento no Internet Explorer 20 px esquerda. Pode modificar o código do seguinte xeito:

#div {

float: left;

-margem esquerda: 10%;

}

ou así

#div {

float: left;

Margin-right: 10px;

}

Ambas as opcións vai resolver o problema de elementos de desprazamento.

navegador erros e lugar de exhibición incorrecta

Paga a pena lembrar que o Internet Explorer - non é o único navegador que poden ocorrer erros. Versións anteriores de Google Chrome e Mozilla tamén amosar incorrectamente algúns elementos de sitios modernos. Para cada unha destas correccións, podes atopar unha solución. En xeral, nótase que o uso de Float creará un deseño orixinal e atractivo web. Comprender os conceptos básicos e os principios desta propiedade pode axudar a evitar erros e facer a vida máis fácil para calquera creador.