CSS Düzeni - açık ve net düzeltme

İçindekiler

    İçindekiler tablosunu göster

CSS Özelliği clear

float özelliğini kullandığımızda ve istediğimizde aşağıdaki bir sonraki öğede (sağda veya solda değil), clear komutunu kullanmamız gerekecek mülk.

clear özelliği şunu belirtir: kayan bir öğenin yanındaki öğede gerçekleşmelidir.

clear özelliği aşağıdakilerden birine sahip olabilir: aşağıdaki değerler:

none

- Eleman sol veya sağ yüzen elemanların altına itilmez. Bu varsayılandır

left

- Eleman sol yüzen elemanların altına itilir

right

- Eleman sağa kayan elemanların altına itilir

both

- Eleman hem sol hem de sağ kayan elemanların altına itilir

inherit

- Öğe, net değeri üst öğesinden devralır

Şamandıraları temizlerken, temizlemeyi kayan noktayla eşleştirmelisiniz: If an element sola doğru yüzüyorsa, sola doğru ilerlemelisiniz. Kayan öğeniz yüzmeye devam edecek, ancak temizlenen öğe web'de onun altında görünecek sayfa.

Örnek

Bu örnek, kayan noktayı sola doğru temizler. Burada şu anlama gelir: eleman soldaki kayan elemanının altına itilir:

div1 {
  float: left;
}
div2 {
  clear: left;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

Düzeltme Hack'i

Eğer yüzen bir eleman kendisini kapsayan elemandan daha uzunsa, kabının dışına "taşacaktır". Daha sonra bir düzeltme hack'i ekleyebiliriz. bu problemi çöz:

Without Clearfix

With Clearfix

Örnek

.clearfix {
  overflow: auto;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

overflow: auto düzeltmesi, kenar boşluklarınızın ve dolgunuzun kontrolünü elinizde tutabildiğiniz sürece iyi çalışır (aksi takdirde kaydırma çubuklarını görebilirsiniz). Ancak yeni, modern düzeltme hack'inin kullanımı daha güvenlidir ve çoğu web sayfası için aşağıdaki kod kullanılır:

Örnek

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Daha sonraki bir bölümde ::after sözde öğesi hakkında daha fazla bilgi edineceksiniz.