Float¶

Float

Eigentlich war float nur für das Umfliessen von Bildern im Text gedacht, aber float war viele Jahre Layout-Technik No1. Die Sidebar der Content Management Systeme war ohne float genauso wenig denkbar wie die Navigationsleiste.

Mittlerweile wird Float nicht mehr für ganze Seitenlayouts verwendet. Hier sind Flexbox und Grid deutlich flexibler.

Verwendung Float

Float wird für Teilbereiche von Seiten eingesetzt. Es bleibt die einfachste Lösung für Logos neben Seitennamen, Bildergallerien oder umfliessenden Text.

Ohne Float¶

Grünes Quadrat in CSS:

.box{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            margin: 10px;
    }

p {
        background-color: lightgray;
        width: 500p
   }

Text/Quadrat in HTML:

<div class="box"> </div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deserunt exercitationem 
          cupiditate cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Impedit nemo deserunt exercitationem cupiditate cumque. Lorem, ipsum dolor sit amet consectetur 
            adipisicing elit. Numquam accusantium, pariatur, ut tenetur earum fugit et in aliquid placeat 
            maxime iusto sequi fuga aut repellendus, praesentium sunt consectetur. Voluptate illo quos facere 
            omnis recusandae!</p>

Mit Float¶

.box{
            width:100px;
            height: 100px;
            background-color: greenyellow;

            float: left; /* Quadrat soll vom Text umflossen werden*/
    }

Mehrere Elemente nebeneinander¶

.box{
            ...
            margin: 10px;
            float: left; /* Quadrat soll */
    }

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

Wenn Sie Ihr Browserfenster verkleinern, werden die float-Elemente automatisch neu angeordnet.

Float für bestimmte Elemente deaktivieren¶

Wenn float wie für das grüne Quadrat aktiviert ist, möchten Sie vielleicht den Text davon ausnehmen. Das können Sie mit clear: both für den Text erreichen:

p {
        background-color: lightgray;
        width: 500px;

        clear:both;
      }

Float als Seiten-Layout¶

        *{box-sizing: border-box; }

        body{ font-family: sans-serif; }

        header, footer{ 
            background-color: #F6D860;
            text-align: center; }

        header{padding: 15px; }

        footer{padding: 5px;}

        nav{ 
            width: 20%;
            padding: 10px;
            height: 300px;
            background-color: #95CD41;
            float: left; 
        }

        main{ 
            background-color: #FF7F3f;
            padding: 10px;
            height: 300px;
            margin-left: 20%;
        }

        span{ 
            font-size: 0.8em;
            color: #FF7F3f;
            font-weight:bold;
        }

<body>
    <header>
         <!--<span> = Inline-Container-->
        <h1>Header <br> <span>FLOAT</span></h1>
    </header>
    <nav>
        <h2>Navigation</h2>
        <ul>
            <li>Startseite</li>
            <li>About me</li>
            <li>Impressum</li>
        </ul>
    </nav>
    <main>
        <h1>Inhalte</h1>
        <p>Float haben Sie im letzten Kapitel schon kennen gelernt. </p>
    </main>
    <footer> 
        <h1>Footer</h1>
    </footer>
</body>