cssFloat ve styleFloat özellikleri, elementin onu çevreleyen ana elementi içinde kaydırılacağı yönü belirler. Sola ve sağa doğru olabilecek bu kaydırma işlemi, elementin kaydırılan yönünün diğer yanını kaplayacak şekilde, özellikle block elementlerinin yerleştirilmesine imkan sağlar.
styleFloat : Internet Explorer 4+ sürümlerinde kullanılır.
cssFloat : Firefox ve Opera 3.5+ sürümlerinde kullanılır.
DOM Sözdizimi
element.style.cssFloat = "yon"
element.style.styleFloat = "yon" // Internet Explorer
için
CSS Sözdizimi
float: yon
| yon | Aşağıdaki değerleri alarak elementi belirtilen yöne kaydırır.
- none : Element kaydırılmaz.
- left : Element sola doğru kaydırılarak sağ tarafına element yerleştirilmesine imkan sağlanır..
- right : Element sağa doğru kaydırılarak sol tarafına element yerleştirilmesine imkan sağlanır.
|
Aşağıdaki örnek, iki div elementinden birinin float:left ile sola, diğerinin float:right ile sağa kaydırılarak, kendilerinden sonra gelen P elementi ile oluşturulmuş bir paragrafın yerleşimini göstermektedir.
Örnekte, paragrafın her iki yanındaki kaydırılabilen elementlerin temizlenmesini sağlayan style.clear özelliği varsayılan olarak none değerindedir.
<style type="text/css">
div#ornekSol,
div#ornekSag {
width:90px;
height:70px;
}
div#ornekSol {
background-color:#3090E0;
float:left;
}
div#ornekSag {
background-color:#90E030;
float:right;
}
table#ornekTablo tr td {
padding:10px;
border:solid 1px red;
}
</style>
<script type="text/javascript">
function pTemizle() {
document.getElementById("paraf").style.clear = "both";
}
function pDuzelt() {
document.getElementById("paraf").style.clear = "none";
}
</script>
<input type="button" value="Paragraf -> clear:both" onClick="pTemizle()"/>
<input type="button" value="Paragraf -> clear:none" onClick="pDuzelt()"/>
<table id="ornekTablo" border="0" width="400">
<tr><td>
<div id="ornekSol"></div>
<div id="ornekSag"></div>
<p id="paraf">Burası rastgele içeriktir...<br/>
Gördüğünüz gibi <b>float</b>:<b>left</b> olan mavi kutucuk sol tarafa
dayalı ve sağındaki elementlere izin vermekte, <b>float</b>:<b>right</b> olan
yeşil kutucuk ise sağ tarafa dayalı ve solundaki elementlere izin vermektedir.
</p>
</td></tr>
</table>
Canlı Sonuç