Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] clear - jak lepiej zrozumieć?
Forum PHP.pl > Forum > Przedszkole
olkaa
Na http://www.maxdesign.com.au/articles/css-layouts/one-fixed/ jest przykładowy layout css

  1. #content
  2. {
  3. clear: left;
  4. padding: 20px;
  5. }
  6.  


Przeczytałam na stronie http://www.signs.pl/html/s/clear.php o clear.

Czy content musi być w nowej linii? bez clear: left; wygląda tak samo...

Zobaczyłam, że na stronie http://www.maxdesign.com.au/articles/css-l...ts/three-fixed/
Przy 3 kolumnach nie ma clear:left w #content.....
testphpinfo
Najprościej:
Jeżeli chcesz ustawić element z lewej(div#left) i prawej(div#right) strony oraz poniżej (div#footer) to użyjesz clear.

div#left {
width:100px;
height:20px;
float:left;
}


div#right {
width:100px;
height:20px;
float:right;
}

/* użycie clear*/

div#footer {
width:200px;
height:20px;
clear:both;
}

Myślę że już mniej więcej wiesz po co jest clear. Osobiście używam go tylko do tego smile.gif
Pozdrawiam

thek
Clear zabrania opływać dany element z określonej strony. Jest to konieczne przy stosowaniu float, gdyż bez tego każdy kolejny za floatowanym stara się go opływać zgodnie z definicją. W ten sposób małe bloki mogą utworzyć Ci na stronie schodki, co nie będzie raczej efektem celowym winksmiley.jpg Poprzednik podał przykład użycia. Masz dwie części. Jedna płynie w lewo, druga w prawo. Stopka nie może być jednak ustawiona gdzieś pomiędzy nimi czy wciskać się pod określony. Dlatego ustawia się jej styl clear:both, co sugeruje, że z żadnej strony nie może mieć elementów pływających. Zobacz sam
Tutaj brak clear spowodował, że tytuły kolejnych newsów opłynęły miniaturkę zamiast zejść pod nią. To jest błąd autora tego stylu. Kolejny wpis (zapewne div) powinien mieć definicje clear ustawioną, co zapobiegło by tej wpadce.
croc
Ja unikam clear, bo w niektórych przeglądarkach nad elementem z tą właściwością tworzy się margines. Wolę:
  1. overflow: hidden;
  2. height: 100%;
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.