Zur Navigation

float, clear etc.

1 lava

Hallo, ich hab bei CSS die float-Eigenschaft noch nicht so ganz verstanden. Normalerweise wird ein Element, daß z.B. mit float: right definiert ist, rechts neben dem ZUVOR verwendeten Element positioniert, richtig? Oder gilt es nur für UMSCHLIESSENDE Elemente?

Jedenfalls ging es nun darum, einen zweispaltigen Bereich innerhalb eines anderen Div's aufzubauen, und ein Freund hat mir hierfür folgenden Code gegeben, und er funktioniert auch beim Aufruf

<div class="container clearfix">
    <div class="left">
    b
    </div>
    <div class="right">
    b
    </div>
    
    <div class="left">
    b
    </div>
    <div class="right">
    b
    </div>
</div>
, aber ich verstehe nicht WARUM. Die css-classes sind wie folgt definiert:
.container{
	width:620px;
	padding:5px;
	margin:5px auto;
	background-color:#CCCCCC
}
.left {
	float:left;
	background-color: #999999;
	margin: 5px;
	width:300px;
}
.right {
	float:right;
	background-color: #999999;
	margin: 5px;
	width:300px;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Was macht das "clearfix"? Das Attribut "after" und der Befehl "clear" sind mir gänzlich unbekannt....

21.07.2007 08:41

2 Jörg

Hallo lava,

Normalerweise wird ein Element, daß z.B. mit float: right definiert ist, rechts neben dem ZUVOR verwendeten Element positioniert, richtig?

Nein, genau umgekehrt: im HTML-Code folgende Elemente werden links von diesem Element positioniert

clear beendet einen Umfluss mit float:left oder float:right, das betreffende Block-Element wird wieder in voller Breite angezeigt

Die Bedeutung von :before und :after wird hier erklärt:

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after

Man kann darüber also Content einfügen - der IE unterstützt dieses Pseudoelement allerdings noch nicht

21.07.2007 09:08

3 Paul (Gast)

Vielen dank euch beiden hat mir weitergeholfen.

20.10.2008 15:05

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]