Float ile ilgili CSS Özellikleri
Bu makale, float ile ilgili CSS özelliklerini açıklar.
float ve clear özelliklerinin kullanım alanlarını ve sözdizimini öğrenebilirsiniz.
YouTube Video
Önizleme için HTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 </article>
38 </main>
39</body>
40</html>Float ile ilgili CSS Özellikleri
float ve clear özellikleri
1.float-left {
2 float: left;
3 width: 150px;
4 margin-right: 20px;
5 background-color: lightblue;
6}
7
8.content {
9 width: 300px;
10 height: 100px;
11}
12
13.content p {
14 background-color: lightblue;
15 margin: 10px;
16}
17
18.clearfix {
19 clear: both;
20 display: none;
21}float, bir öğeyi ebeveyn öğesi içinde sola veya sağa yerleştirmeye ve diğer öğelerin etrafını sarmasına olanak tanıyan CSS özelliklerinden biridir. float özelliği genellikle metin etrafında resim veya kutu öğeleri yerleştirmek için kullanılır, ancak flex ve grid gibi yeni düzen yöntemlerinin yaygınlaşmasıyla kullanımı azalmıştır.
float-leftsınıfında,floatözelliğileftolarak ayarlanır. Uygulanan öğe ebeveyn öğenin sol tarafına yerleşir ve sonraki öğe sağ tarafa sarılır.clearfixsınıfında,clearözelliğibotholarak ayarlanır. Bu sınıfı kullanmak, sonraki öğenin floating öğenin etrafını sarmasını engeller. Burada, düzeni korumak için resimden sonraki öğenin float yapmasını engelliyoruz.
float nasıl kullanılır
Değerler
left: Öğeyi sola taşır, diğer öğelerin sağ tarafa sarılmasına olanak tanır.right: Öğeyi sağa taşır, diğer öğelerin sol tarafa sarılmasına olanak tanır.none: Varsayılan değerdir ve öğeyi float yapmaz.inherit: Ebeveyn öğedenfloatözelliğinin değerini devralır.
clear Özelliği
floatkullanıldığında, sonraki öğe floating öğenin etrafını sarabilir. Bunu önlemek içinclearözelliği kullanılır.cleariçin değerler şu şekildedir:.left: Sola floating yapılmış öğeleri engeller.right: Sağa kayan öğelerden kaçınır.both: Hem sola hem de sağa kayan öğelerden kaçınır.none: Elemanların etrafında yüzmesini sağlar. Bu varsayılan değerdir.
Notlar
floatkullanıldığında, ebeveyn öğenin yüksekliğinin, kayan öğenin yüksekliğini göz ardı etmesi sorunu oluşabilir. Bunu önlemek için ebeveyn öğedeclearfixtekniğini veyaoverflow: hidden;kullanın.- Duyarlı tasarımda veya karmaşık düzenlerde
float,flexveyagrid'e kıyasla daha zor kontrol edilebilir, bu nedenleflexveyagridkullanımı önerilir.
Özet
float, öğeleri sola veya sağa kaydırmak ve metin ya da diğer öğelerin etrafını sarmasına izin vermek için kullanılan eski bir tekniktir ve hala basit düzenlerde veya resim sarmalamalarında bazen kullanılır. Ancak, daha esnek ve kolay düzenler oluşturmak için flexbox veya grid önerilir.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.