CSS
Pływa

Składnia

• jasne: brak | lewo | prawo | oba | inline-start | koniec linii;
• float: left | prawo | brak | inline-start | koniec linii;

Uwagi

Umieść obraz w tekście

Najbardziej podstawowym zastosowaniem pływaka jest zawijanie tekstu wokół obrazu. Poniższy kod utworzy dwa akapity i obraz, z drugim akapitem opływającym obraz. Zauważ, że zawsze jest ona zawarta po elemencie pływającym, który przepływa wokół elementu pływającego.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<img src="http://lorempixel.com/200/100/" />

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img {
  float:left;
  margin-right:1rem;
}

To będzie wynik

Codepen Link

Prosty układ dwóch kolumn o stałej szerokości

Prosty układ dwóch kolumn składa się z dwóch elementów pływających o stałej szerokości. Zauważ, że pasek boczny i obszar zawartości nie są tej samej wysokości w tym przykładzie. Jest to jedna z trudnych części z układami wielokolumnowymi za pomocą elementów pływających i wymaga obejść, aby wiele kolumn miało tę samą wysokość.

HTML:

<div class="wrapper">

<div class="sidebar">
  <h2>Sidebar</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>

<div class="content">
  <h1>Content</h1>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</div>

</div>

CSS:

.wrapper {
  width:600px;
  padding:20px;
  background-color:pink;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.sidebar {
  width:150px;
  float:left;
  background-color:blue;
}

.content {
  width:450px;
  float:right;
  background-color:yellow;
}

Prosty układ trzech kolumn o stałej szerokości

HTML:

<div class="wrapper">
  <div class="left-sidebar">
    <h1>Left Sidebar</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
  <div class="content">
    <h1>Content</h1>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
  </div>
  <div class="right-sidebar">
    <h1>Right Sidebar</h1>
    <p>Fusce ac turpis quis ligula lacinia aliquet.</p>
  </div>
</div>

CSS:

.wrapper {
  width:600px;
  background-color:pink;
  padding:20px;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.left-sidebar {
  width:150px;
  background-color:blue;
  float:left;
}

.content {
  width:300px;
  background-color:yellow;
  float:left;
}

.right-sidebar {
  width:150px;
  background-color:green;
  float:right;
}

Dwukolumnowy układ leniwy / chciwy

Ten układ używa jednej pływającej kolumny, aby utworzyć układ dwukolumnowy bez zdefiniowanych szerokości. W tym przykładzie lewy pasek boczny jest „leniwy”, ponieważ zajmuje tyle miejsca, ile potrzebuje. Innym sposobem na powiedzenie tego jest to, że lewy pasek boczny jest „owinięty w folię”. Prawa kolumna treści jest „chciwa”, ponieważ zajmuje całą pozostałą przestrzeń.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>

CSS:

.sidebar {
  /* `display:table;` shrink-wraps the column */
  display:table;
  float:left;
  background-color:blue;
}

.content {
  /* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
  overflow:hidden;
  background-color:yellow;
}

Skrzypce

wyczyść własność

Właściwość clear jest bezpośrednio związana z liczbami zmiennoprzecinkowymi. Wartości nieruchomości:

• brak - domyślnie. Umożliwia elementy pływające po obu stronach
• left - po lewej stronie nie są dozwolone żadne elementy pływające
• z prawej - Niedozwolone są elementy pływające po prawej stronie
• oba - Niedozwolone są elementy pływające po lewej lub po prawej stronie
• initial - Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej
• inherit - dziedziczy tę właściwość po elemencie nadrzędnym. Przeczytaj o dziedziczeniu

<html>
<head>
<style>
img {
    float: left;
}

p.clear {
    clear: both;
}
</style>
</head>
<body>

<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>

</body>
</html>

Clearfix

Hack w clearfix jest popularnym sposobem przechowywania pływaków (N. Gallagher aka @necolas)

Clearfix jest pojęciem, które nie należy mylić z właściwością clear (dotyczy to również liczb zmiennoprzecinkowych, a więc możliwych pomyłek). Aby zawierać .cf , musisz dodać .cf lub .clearfix do kontenera ( element nadrzędny ) i stylizować tę klasę zgodnie z kilkoma zasadami opisanymi poniżej.

3 wersje z nieco innymi efektami (źródła: nowy hack mikro Clearfix autorstwa N. Gallaghera i clearfix ponownie załadowany przez TJ Koblentza):

Clearfix (nadal występuje zwijanie górnego marginesu zawartych pływaków)

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

Clearfix zapobiega również zwijaniu się górnego marginesu zawartych pływaków

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix z obsługą przestarzałych przeglądarek IE6 i IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen wykazujący efekt Clearfix

Inne zasoby: wszystko, co wiesz o clearfix, jest nieprawidłowe (clearfix i BFC - blokowanie formatowania kontekstu, podczas gdy hasLayout dotyczy przestarzałych przeglądarek IE6 może 7)

DIV w linii za pomocą pływaka

div jest elementem na poziomie bloku, tzn. Zajmuje całą szerokość strony, a rodzeństwo jest umieszczone jedno pod drugim, niezależnie od ich szerokości.

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

Wyjściowy kod będzie następujący

Możemy uczynić je wbudowanymi, dodając do div właściwość float css.

HTML:

<div class="outer-div">
    <div class="inner-div1">
        <p>This is DIV 1</p>
    </div>
    <div class="inner-div2">
        <p>This is DIV 2</p>
    </div>
</div>

CSS

.inner-div1 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #337ab7;
    padding:50px 0px;
}
 
.inner-div2 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #dd2c00;
    padding:50px 0px;
}
 
p {
    text-align:center;
}

Codepen Link

Użycie właściwości przepełnienia do wyczyszczenia pływaków

Ustawienie wartości overflow na hidden , auto lub scroll do elementu spowoduje wyczyszczenie wszystkich elementów pływających w tym elemencie.

Uwaga: użycie overflow:scroll zawsze wyświetla pole przewijania