Float w CSS3

By /

Html CSS

Właściwość float w CSS3 jest używana do umieszczenia elementu po lewej lub prawej stronie kontenera, pozwalając innym treściom na “opływanie” go z pozostałych stron. Tradycyjnie float był często wykorzystywany do układania obrazków w tekście lub do tworzenia prostych layoutów stron. Jednak w nowoczesnym web designie, float coraz częściej ustępuje miejsca Flexboxowi i CSS Gridowi, które oferują większą kontrolę i są lepiej dostosowane do tworzenia responsywnych layoutów.

Podstawowe użycie float:

  • float: left: Element jest umieszczany po lewej stronie swojego kontenera.
  • float: right: Element jest umieszczany po prawej stronie swojego kontenera.
  • float: none: Domyślne ustawienie, element nie jest umieszczany z użyciem float.

Przykład użycia float:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Float w CSS3</title>
    <style>
        .container {
            overflow: auto; 
            /* Zapobiega wypływaniu treści poza kontener */
        }
        
        .float-left {
            float: left;
            margin-right: 20px; 
            /* Odstęp od treści po prawej stronie */
        }
        
        .float-right {
            float: right;
            margin-left: 20px; 
            /* Odstęp od treści po lewej stronie */
        }
        
        .content {
            padding: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.jpg" class="float-left" alt="Przykładowy obrazek">
        <p class="content">
             Ten paragraf opływa obrazek umieszczony po lewej 
             stronie za pomocą właściwości float.
         </p>
    </div>
    <div class="container">
        <img src="example.jpg" class="float-right" alt="Przykładowy obrazek">
        <p class="content">Ten paragraf opływa obrazek 
              umieszczony po prawej stronie.</p>
    </div>
</body>
</html>

czyszczenie float-ów:

Ważnym aspektem użycia float jest kontrola nad elementami, które powinny być wyświetlane poniżej opływanych treści, a nie obok nich. Właściwość clear pozwala na to, określając, że element nie powinien być wyświetlany obok innych elementów z float.

Podsumowanie:

Choć float jest przydatnym narzędziem do prostego układania treści, nowoczesne metody jak Flexbox i CSS Grid oferują większą elastyczność i kontrolę nad układem, szczególnie w kontekście responsywnego designu. Mimo to, zrozumienie działania float jest ważne, ponieważ nadal znajduje zastosowanie w wielu projektach i sytuacjach.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top