# 04 - CSS Layout

## 🎯 Co se naučíte

V této lekci se naučíte vytvářet layout (rozvržení) webové stránky pomocí CSS.

## 📚 Témata lekce

- **Box Model** (margin, padding, border)
- **Display property** (`block`, `inline`, `inline-block`)
- **Float** (obtékání elementů)
- **Clear** (ukončení obtékání)
- **Width a Height** (šířka a výška elementů)
- **Základní layouty** (dvousloupcový, třísloupcový)

## 📂 Soubory v projektu

- `index.html` - HTML struktura s layoutem
- `style.css` nebo `css/` složka - CSS styly pro layout

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Prozkoumejte CSS - zaměřte se na vlastnosti `float`, `clear`, `width`
3. Použijte Developer Tools (F12) a vyzkoušejte Box Model vizualizaci
4. Zkuste změnit šířky sloupců a sledujte, jak se mění layout

## 💡 Tip pro studenty

- **Box Model**: `margin` (vnější odsazení) ≠ `padding` (vnitřní odsazení)
- **Float** je starší technika - dnes se používá spíše Flexbox nebo Grid
- Nezapomeňte používat `clear: both;` po float elementech
- Developer Tools (F12) jsou váš nejlepší přítel pro debugování layoutu

## ⚠️ Důležité poznámky

- Float-based layout je starší přístup
- V moderních projektech se používá **Flexbox** (lekce 10) nebo **Grid** (lekce 12)
- Tato lekce je důležitá pro pochopení starších projektů

## 🔗 Související lekce

- **Předchozí:** 03_css_uvod - základy CSS
- **Další:** 10_flex - moderní flexbox layout
- **Související:** 12_grid - CSS Grid systém