float wywala element poza div

Mam na stronie div'a przeznaczonego na treść. Spodziewam się, że może się tam znaleźć choć co. Np. jakiś obiekt z ustawionym w css float. Jak zauważyłem dodanie float do stylu obiektu powoduje wyrzucenie go z div. Gdy nadaje div border to obiekt wylatuje poza obramowanie a div zmniejsza się (jeżeli nic innego w div nie ma to powstaje linia jakby hr :-) ).

Znalazłem obejście: do div wstawiam (na końcu diva - po wszystkich problematycznych obiektach) pustego div z ustawionym clear:both. Działa, ale trochę komplikuje mi koncepcje strony.

Moje pytanie: jak pozbyć się tego efektu? Jak to zrobić bez nadmiarowego div?

<div id="target">
<style>
    h1 {
    float:right;
    background-color:red
    }
    p {
    float:left;
    }
    div {
    width:960px;
    margin: auto auto;
    }
  </style>
<div>
    <p>test</p><h1> udało się :&gt; </h1>
</div>
<div id="spacer"></div>
</div>
</div>

To bardzo standardowy problem. Takie zachowanie, tj. "wypływanie" elementów... pływających (z ustawionym float) z elementu zawierającego, jest normalne. Elementy pływające po prostu nie są brane pod uwagę przy liczeniu wysokości elementu zawierającego. Nie rozciągają elementu zawierającego, tylko z niego wypływają.

Sposób, który intuicyjnie wymyśliłeś, jest w pełni poprawny, choć -- jak zauważyłeś -- powoduje konieczność wstawienia dodatkowego, prezentacyjnego, brzydkiego elementu.

Na szczęście są inne sposoby. Wygooglaj w necie słowo "clearfix", bo tak nazywamy kod, który sprawia, że elementy zawierające obejmują znajdujące się w nich elementy pływające.

Przykładowo, zadziała dodanie do elementu zawierającego overflow: hidden oraz własności, która ustawi w IE6 hasLayout (np. zoom: 1 umieszczone w arkuszu tylko dla IE, a Ty tam masz szerokość w pikselach, co samo w sobie wystarczy).

Inna opcja polega na użyciu pseudoklasy :after.

Powinieneś to wszystko znaleźć w google szukając clearfix.

thx, good stuff

na razie zastosuje overflow, bo widzę, że działa. Później poczytam. Piszesz o kilku rozwiązaniach, co sugeruje nieprzenaszalność rozwiązania między przeglądarkami (always a catch)

@lord_didger:
Tak, są z tym problemy. overflow nie jest idealne, ale ja często to stosuje. Zadziała w różnych przeglądarkach. Nie zadziała w IE6, chyba że do elementu z overflow dorzucisz jeszcze jakąś własność, która włączy hasLayout. U Ciebie już taką masz: width. Ona nadaje layout. Jak nie, to zawsze możesz dodać zoom: 1, która nic nie zrobi oprócz nadania layoutu (a więc niczego nie popsuje). Tylko w CSS nie ma własności zoom, to rozszerzenie Microsoftu. Więc umieść to w arkuszu jedynie dla IE, dołączanym komentarzami warunkowymi. Wtedy CSS się zwaliduje i inne przeglądarki nie będą sypały błędami w konsoli, bo nie zobaczą zoom: 1.