CSS Layout - jasné a jasné

Obsah

    Zobrazit obsah

Vlastnost CSS vymazat

Když použijeme vlastnost float a chceme další prvek níže (nikoli vpravo nebo vlevo), budeme muset použít clear vlastnictví.

Vlastnost clear určuje co by se mělo stát s prvkem, který je vedle plovoucího prvku.

Vlastnost clear může mít jednu z následující hodnoty:

none

- Prvek není zasunut pod levý nebo pravý plovoucí prvek. Toto je výchozí nastavení

left

- Prvek je posunut pod levý plovoucí prvky

right

- Prvek je posunut pod pravým plovoucím prvkem

both

- Prvek je zasunut pod levý i pravý plovoucí prvek

inherit

- Prvek zdědí jasnou hodnotu od svého rodiče

Při čištění plováků byste měli porovnat clear s plovoucím: Pokud prvek je plovoucí doleva, pak byste měli vyčistit doleva. Váš plovoucí prvek bude i nadále plavat, ale vyčištěný prvek se na webu objeví pod ním strana.

Příklad

Tento příklad vyčistí plovák doleva. Zde to znamená, že prvek je posunut pod levý plovoucí prvek :

div1 {
  float: left;
}
div2 {
  clear: left;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

Clearfix Hack

Pokud je plovoucí prvek vyšší než prvek, který jej obsahuje, je "přeteče" mimo svůj kontejner. Poté můžeme přidat hack clearfix vyřešit tento problém:

Without Clearfix

With Clearfix

Příklad

.clearfix {
  overflow: auto;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Clearfix overflow: auto funguje dobře, pokud jste schopni mít kontrolu nad svými okraji a odsazením (jinak může vidět posuvníky). The nový, moderní hack clearfix je však bezpečnější a pro většinu webových stránek se používá následující kód:

Příklad

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Více o pseudoprvku ::after se dozvíte v pozdější kapitole.