Hazırladığımız web sayfalarında sayfa düzeni ve konumlandırması için CSS’ te float özelliği kullanılır. Sayfa yapısı içinde kullanılan öğelerin sola yada sağa yaslanması bu özellik ile sağlanabilir.
float: left Öğeleri sola yaslamak için;
float: right Öğeleri sağa yaslamak için kullanılır.
Clear Özelliği
float özelliği uygulanan öğe kendinden sonra gelen öğeleri de etkilemesi CSS’in sunduğu bir avantajdır. Ancak bir noktadan sonra bu avantajı kullanmak istemeyebiliriz. İşte tam bu noktada clear özelliğini kullanarak float’ın sayfa akışı içinde yarattığı etkiyi kaldırabiliriz. Alabileceği değerler;
- none : Bu varsayılan değerdir.
- left : Sola yaslama (float : left) sonucu değişen akışı normale döndürür.
- right : Sağa yaslama (float : right) sonucu değişen akışı normale döndürür.
- both : Sola veya sağa yaslama (float : left / right) sonucu değişen akışı normale döndürür.
- inherit : Özellik üst öğenin değerini devralır.
Aşağıdaki örneği inceleyelim. Örneğimizde sayfamıza 1 adet resim ve 1 paragraf ekleyeceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <meta charset="utf-8"> </head> <body> <img src="1.jpg"> <p> Lorem ipsum dolor sit amet, labores petentium comprehensam eu has, nec aperiri iuvaret consequuntur ex. Mea ei evertitur comprehensam, per oblique eruditi dolorum ex, no summo vivendo est. Ea audiam aperiri nec, partem tritani epicuri no sit, ut duo quis esse cotidieque. Assum consul graecis eum an, ex brute congue ridens sit. Ut mei cetero meliore, id etiam everti oblique est, eam perpetua patrioque expetendis ea. Nec porro officiis mandamus ne, te eos tale nemore causae, postea suavitate ei pri. Saperet persecuti sea in, quo in rebum errem insolens, pro sonet molestie ne. Duo minim mediocrem id. Laboramus scripserit suscipiantur id nam, labore eruditi eam ut. Ea ius ornatus percipit facilisis. </p> </body> </html> |
Sayfamızı görüntüleyelim.
Şimdi sayfamızdaki akışı değiştirecek şekilde <img> etiketine float:left özelliği verelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <meta charset="utf-8"> <!--<link href="style.css" rel="stylesheet" type="text/css">--> <style> img{ float: left; margin-right: 10px; margin-bottom: 5px; } </style> </head> <body> <img src="1.jpg"> <p> Lorem ipsum dolor sit amet, labores petentium comprehensam eu has, nec aperiri iuvaret consequuntur ex. Mea ei evertitur comprehensam, per oblique eruditi dolorum ex, no summo vivendo est. Ea audiam aperiri nec, partem tritani epicuri no sit, ut duo quis esse cotidieque. Assum consul graecis eum an, ex brute congue ridens sit. Ut mei cetero meliore, id etiam everti oblique est, eam perpetua patrioque expetendis ea. Nec porro officiis mandamus ne, te eos tale nemore causae, postea suavitate ei pri. Saperet persecuti sea in, quo in rebum errem insolens, pro sonet molestie ne. Duo minim mediocrem id. Laboramus scripserit suscipiantur id nam, labore eruditi eam ut. Ea ius ornatus percipit facilisis. </p> </body> </html> |
Ekran çıktısı:
Şimdi diğer örneğimize bakalım. Bu örneğimizde float:left ve float:right özelliğini birlikte aynı sayfada kullanalım.
index.html sayfamız;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sol"></div> <div class="sol"></div> <div class="sol"></div> <div class="sag"></div> <div class="sag"></div> <div class="sag"></div> <div class="temizle"></div> <div class="sol"></div> <div class="sag"></div> <div class="temizle"></div> <div class="sol"></div> <div class="sol"></div> <div class="sol"></div> <div class="sag"></div> <div class="sag"></div> <div class="sag"></div> <div class="temizle"></div> <div class="sol"></div> <div class="sag"></div> <div class="temizle"></div> <div class="sol"></div> <div class="sol"></div> <div class="sol"></div> <div class="sag"></div> <div class="sag"></div> <div class="sag"></div> </body> </html> |
style.css dosyamız;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .sol{ float: left; width: 100px; height: 100px; background-color: red; margin: 5px; } .sag{ float: right; width: 100px; height: 100px; background-color: red; margin: 5px; } .temizle{ clear: both; } |
Ekran Çıktısı:
