Flota sobre la ayuda en HTML

Al crear páginas web para su negocio utilizando código HTML y CSS simple, puede usar CSS para diseñar y dar formato a "divisiones" específicas en su contenido, definido en su código HTML, que le permite formatear texto e imágenes de tal manera que se "envuelven" o se ajustan entre sí. En otras palabras, partes de su contenido pueden ajustarse a otras secciones, dispuestas de tal manera que las imágenes y el texto puedan encajar como columnas, cuadrículas o cualquier otra alineación especificada.

HTML y CSS

Si bien HTML presenta un meta-lenguaje etiquetado que define cómo aparecerá una página web en un navegador web, el verdadero poder del diseño web se obtiene cuando se mezcla HTML con hojas de estilo en cascada. CSS define comportamientos para elementos incrustados en archivos HTML, creando un diseño universal para la página. Varios documentos HTML pueden referirse a la misma página CSS, lo que significa que puede imponer una apariencia regular en todas sus páginas.

Divisiones HTML y Flotante

CSS trabaja con HTML definiendo el comportamiento de las etiquetas HTML. Específicamente, CSS aprovecha las etiquetas "". Estas etiquetas de división rodean una parte del documento e identifican como una unidad de información discreta que debe tener el mismo estilo en todo momento. Estas divisiones también funcionan como "cajas" de tipo, ya que a través de CSS puede hacer que las secciones de contenido cambien de color, cambien de tamaño o "floten" a un límite de página específico para que cambiar el tamaño de la página no arruine el diseño.

Flotando en CSS y HTML

Para usar el atributo "flotante", creas una división en tu contenido o te refieres a una imagen. En su documento CSS, luego hace referencia a ese div o imagen por nombre, y le da un atributo flotante. El siguiente ejemplo de código muestra cómo lograr esto con una hoja de estilo interna. Tenga en cuenta que la división en el HTML, llamada "section1", tiene un ancho de 100 píxeles. Todas las divisiones que usan float requieren un ancho específico. Las imágenes ya tienen un ancho implícito:

Aquí hay algo de contenido dentro de una división.

Claro, márgenes y relleno.

Junto con los conceptos básicos del uso del atributo de flotación, también puede emplear otros elementos, como los atributos clear, margin y padding. El atributo claro garantiza que no aparezca ningún otro contenido en la misma línea que el elemento flotante. Los márgenes controlan el espacio alrededor de los espacios izquierdo e inferior de la división. El relleno controla el espacio interno en la división entre el contenido y los bordes de la división. Estos tres elementos juntos pueden crear divisiones "en forma de caja" limpias que permiten o no permiten que el texto y otras imágenes se envuelvan alrededor de ellos.