css float özelliği, bir html elementinin nasıl kaydırma işlemi yapılacağımızı belirlemek için kullanılır. Genelde menülerde çok kullanılan bir özelliktir.
Aldığı değerler:
left : Sola kaydırma
right :Sağa kaydırma.
none : Değer yok. (varsayılan )
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek: float : left ve float : right örneği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
}
ul.two li { float: left; margin-right: 10px; }
ul.three li { float: right; margin-right: 10px; }
</style>
</head>
<body>
<ul class="one">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ul class="two">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<div></div>
<ul class="three">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
</html>Html çıktısı:
Örnek: float : none, float : initial ve float : inherit örneği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul {list-style-type: none;}
ul li { float: right; margin: 10px; }
ul.one li {float: initial; }
ul.two li { float: none; }
div.three {float: left;}
div.three p { float: inherit; margin: 5px;}
</style>
</head>
<body>
<ul class="one">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ul class="two">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<div class="three">
<p> HTML </p>
<p> CSS </p>
<p> JS </p>
</div>
</body>
</html>Html çıktısı:
Not : float özelliğinde initial ve none yöntemi çok kullanmayız. Çünkü sağlıklı çalışmayabilir. clear:both kullanılır. Bu sayede akış yönü daha düzgün bir şekilde olur. Bu konu başka bir konu olduğu için yazımız uzun olmaması için burada anlatmayacağız.
css float özelliği yerine kullanılan daha farklı yöntemlerde vardır. flex yapısı ile de html elementlerinin konumunu istediğimiz gibi yönetebiliyoruz. Bu konuyu başka yazımızda anlatacağız.
Başka bir yazımızda görüşmek üzere…
