float, clear etc.

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

Vielen dank euch beiden hat mir weitergeholfen.