CSS Layout - Float příklady

Obsah

    Zobrazit obsah

Tato stránka obsahuje běžné příklady float.

Mřížka krabic/krabice stejné šířky

Box 1

Box 2


Box 1

Box 2

Box 3

Díky vlastnosti float je snadné přenášet pole obsahu vedle sebe:

Příklad

 * {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* three 
  boxes (use 25% for four, and 50% for two, etc) */
  padding: 
  50px; /* if you want space between the images */
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

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

<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>Some text inside the box.</p>
  </div>
</div>

<p><strong>Note:</strong> Here, we use the clearfix hack to take care of the layout flow. 
We also use the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.</p>

</body>
</html>

Co je velikost krabice?

Můžete snadno vytvořit tři plovoucí krabice vedle sebe. Když však přidáte něco, co zvětší šířku každého rámečku (např. výplň nebo okraje), rámeček se rozbije. Vlastnost box-sizing nám umožňuje zahrnout výplň a okraj do celkové šířky (a výšky krabice), čímž se zajistí, že výplň zůstane uvnitř krabice a nezlomí se.

Více o vlastnosti box-sizing si můžete přečíst v naší kapitole CSS Box Sizing.

Obrazy vedle sebe

Italy
Forest
Mountains

Mřížku polí lze také použít k zobrazení obrázků vedle sebe:

Příklad

 .img-container {
  float: left;
  width: 33.33%; /* three 
  containers (use 25% for four, and 50% for two, etc) */
  padding: 
  5px; /* if you want space between the images */
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

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

<h2>Images Side by Side</h2>
<p>Float images side by side:</p>

<div class="clearfix">
  <div class="img-container">
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  </div>
  <div class="img-container">
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
  <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

<p>Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing property to make sure that the image container doesn't break due to extra padding. Try to remove this code to see the effect.</p>

</body>
</html>

Boxy se stejnou výškou

V předchozím příkladu jste se naučili, jak plovoucí boxy vedle sebe se stejnou šířkou. Není však snadné vytvořit plovoucí krabice se stejnou výškou. Rychlá oprava je však nastavit pevnou výšku, jako v příkladu níže:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Příklad

 .box {
  height: 500px;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 50%;
  padding: 50px;
  height: 300px;
}

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

<h2>Equal Height Boxes</h2>
<p>Floating boxes with equal heights:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <h2>Box 1</h2>
  <p>Some content, some content, some content</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <h2>Box 2</h2>
  <p>Some content, some content, some content</p>
  <p>Some content, some content, some content</p>
  <p>Some content, some content, some content</p>
  </div>
</div>

<p>This example not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.</p>
<p>Go back to the tutorial and find another solution, if this is not what you want.</p>

</body>
</html>

Nicméně to není příliš flexibilní. Je v pořádku, pokud můžete zaručit, že v krabicích bude vždy stejné množství obsahu. Ale obsah mnohokrát není stejný. Pokud zkusíte výše uvedený příklad na mobilním telefonu, uvidíte, že druhý obsah krabice se zobrazí mimo krabici. Zde se hodí CSS3 Flexbox - dokáže se automaticky roztáhnout krabice mají být tak dlouhé jako nejdelší krabice:

Příklad

Použití Flexbox k vytvoření flexibilních boxů:

Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.
Box 2 - My height will follow Box 1.

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container .box {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div class="box">Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.</div>
  <div class="box">Box 2 - My height will follow Box 1.</div>
</div>

<p>Try to resize the browser window to see the flexible layout.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

Tip: Více o modulu Flexbox Layout Module si můžete přečíst v naší kapitole CSS Flexbox.

Navigační nabídka

K vytvoření horizontální nabídky můžete také použít float se seznamem hypertextových odkazů:

Příklad

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Příklad rozvržení webu

Je také běžné vytvářet rozvržení celého webu pomocí vlastnosti float:

Příklad

 .header, .footer {
  background-color: grey;
  color: white;
    padding: 15px;
}
.column {
  float: left;
  
  padding: 15px;
}
.clearfix::after {
  content: 
  "";
  clear: both;
  display: table;
  }
.menu {
  
  width: 25%;
}
.content {
  width: 75%;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
body {
  background-color: white;
}

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

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

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

Další příklady

Nechte obrázek plavat v odstavci vpravo. Přidejte ohraničení a okraje k obrázku.

Obrázek s okrajem a okraji, který se v odstavci pohybuje vpravo

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
  border: 1px dotted black;
  margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>

<h2>Let an image float to the right in a paragraph</h2>

<p>In the paragraph below, the image will float to the right. A dotted black border is added to the image. 
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>

<p><img src="w3css.gif" width="100" height="140">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

Nechte obrázek s popiskem plavat vpravo.

Obrázek s popiskem, který plave doprava

<!DOCTYPE html>
<html>
<head>
<style>
div {
  float: right;
  width: 120px;
  margin: 0 0 15px 20px;
  padding: 15px;
  border: 1px solid black;
  text-align: center;
}
</style>
</head>
<body>

<h2>Let an image with a caption float to the right</h2>

<p>In the paragraph below, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption.</p>

<div>
<img src="w3css.gif" width="100" height="140"><br>CSS is fun!
</div>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

Nechte první písmeno odstavce plavat doleva a písmeno upravte.

Nechte první písmeno odstavce plavat doleva

<!DOCTYPE html>
<html>
<head>
<style>
span {
  float: left;
  width: 0.7em;
  font-size: 400%;
  font-family: algerian, courier;
  line-height: 80%;
}
</style>
</head>
<body>

<h2>Style the first letter of a paragraph and let it float left</h2>

<p>
<span>H</span>ere, the first letter of this text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian".
</p>

</body>
</html>

Použijte float k vytvoření domovské stránky s navigační lištou, záhlavím, zápatím, levým obsahem a hlavním obsahem.

Vytvoření webových stránek s float

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
  background-color: #2196F3;
  color: white;
  text-align: center;
  padding: 15px;
}

.footer {
  background-color: #444;
  color: white;
  padding: 15px;
}

.topmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #777;
}

.topmenu li {
  float: left;
}

.topmenu li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.topmenu li a:hover {
  background-color: #222;
}

.topmenu li a.active {
  color: white;
  background-color: #4CAF50;
}

.column {
  float: left;
  padding: 15px;
}

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

.sidemenu {
  width: 25%;
}

.content {
  width: 75%;
}

.sidemenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidemenu li a {
  margin-bottom: 4px;
  display: block;
  padding: 8px;
  background-color: #eee;
  text-decoration: none;
  color: #666;
}

.sidemenu li a:hover {
  background-color: #555;
  color: white;
}

.sidemenu li a.active {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

Všechny plovoucí vlastnosti CSS

box-sizing

Definuje, jak se vypočítá šířka a výška prvku: zda mají zahrnovat odsazení a ohraničení, nebo ne

clear

Určuje, co se má stát s prvkem, který je vedle plovoucího prvku živel

float

Určuje, zda se má prvek pohybovat vlevo, vpravo nebo ne Všechno

overflow

Určuje, co se stane, když obsah přeteče rámeček prvku

overflow-x

Určuje, co se má udělat s levým/pravým okrajem obsahu, pokud přeteče oblast obsahu prvku

overflow-y

Určuje, co se má udělat s horním/spodním okrajem obsahu, pokud přeteče oblast obsahu prvku