Elementos flotantes tutorial


Como se señaló anteriormente, los elementos de bloque ocupan todo el ancho del espacio permitido (el elemento secundario) y también comienzan con una nueva línea. Además, todos los elementos después del bloque también comienzan con una nueva línea en el diseño de la página web.

Si arregla el ancho de un elemento usando la propiedad width , entonces es posible establecer el flujo alrededor de este elemento por otros. Esta propiedad tiene el nombre float , ya que parece que el elemento " плывет "en el entorno de otros elementos, a la izquierda oa la derecha. Por lo tanto, esta propiedad tiene dos valores básicos: left o right . Con el valor left el elemento se presiona hacia el borde izquierdo, y el flujo alrededor de los otros elementos ocurre a lo largo de su borde derecho. Con el valor right - en todos los sentidos. Tenga en cuenta que necesita establecer el ancho del elemento para hacer esto. También float puede hacer la diferencia none - está instalado por defecto.



Vemos que el texto fuera del bloque está ubicado a la derecha de él. En ausencia de una regla float:left Este texto se colocaría debajo del bloque, de acuerdo con las propiedades de los elementos del bloque.

Para cancelar el ajuste, simplemente inserte el elemento con la regla clear: ambos después del elemento con la regla float . Propiedad clear Agilice la racionalización de los elementos indicados después. Significado both significa que cualquier racionalización - izquierda o derecha - será cancelada. Propiedad clear también puede tomar valores left o right - cancelar el mismo valor de propiedad float . Esta regla se usa a menudo para insertar una línea vacía entre dos elementos flotantes.



Propiedad float tiene sus propias características, lo que puede conducir a resultados inesperados. Uno de ellos es la siguiente situación. Supongamos que ponemos un bloque en otro, y el bloque interno tiene una regla float: left



Vemos que la unidad flotante en realidad no retiene la externa, y va más allá de sus límites. Para corregir este efecto, debe agregar una regla

overflow: hidden;


por bloque bar :

Проверьте свои знания
Crea reglas de estilo para la clase de flores, bajo las cuales el elemento "nadará" hacia la derecha. Crear las siguientes reglas de estilo para la etiqueta img en el bloque en esta clase: la altura 50px; sangría exterior a la izquierda 50px. Usando el dibujo unidad de inserción con el modelo de flor en la cabecera para que se presiona contra el borde izquierdo de la cabecera. La etiqueta de patrón debe colocarse en un bloque de la clase de flor. Coloque el archivo de imagen en la carpeta img en la raíz del proyecto. Crear una etiqueta de formulario. Dentro del bloque de formulario de contacto, antes del formulario, inserte un encabezado con el texto del formulario de contacto, el color de texto # 403E3F.