Forum PHP.pl

Na http://www.maxdesign.com.au/articles/css-layouts/one-fixed/ jest przykładowy layout css

[HTML] pobierz, plaintext 
#content
{
	clear: left;
	padding: 20px;
}
 
[HTML] pobierz, plaintext 

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.....

Ten post edytował olkaa 25.05.2010, 14:46:02

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 (IMG:style_emoticons/default/smile.gif)
Pozdrawiam

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 (IMG:style_emoticons/default/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(IMG:http://img535.imageshack.us/img535/5679/clearh.jpg)
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.

Ja unikam clear, bo w niektórych przeglądarkach nad elementem z tą właściwością tworzy się margines. Wolę:

[CSS] pobierz, plaintext 
overflow: hidden;
height: 100%;
[CSS] pobierz, plaintext