CSS-elrendezés - egyértelmű és egyértelmű javítás

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A CSS-tulajdonság törlése

Amikor a float tulajdonságot használjuk, és azt szeretnénk a következő elem alatt (nem jobb vagy bal oldalon), a clear parancsot kell használnunk. ingatlan.

A clear tulajdonság határozza meg, hogy mit meg kell történnie azzal az elemmel, amely egy lebegő elem mellett van.

A clear tulajdonság a következők valamelyikével rendelkezhet következő értékek:

none

- Az elem nem kerül a bal vagy jobb oldali lebegtetett elemek alá. Ez az alapértelmezett

left

- Az elem a bal oldali lebegtetett elemek alá kerül

right

- Az elem a jobb oldali lebegtetett elemek alá kerül

both

- Az elem mind a bal, mind a jobb oldali lebegtetett elemek alá kerül

inherit

- Az elem a tiszta értéket örökli a szülőjétől

Az úszók törlésekor a clearet az úszóhoz kell igazítani: Ha egy elem balra lebeg, akkor balra kell törölnie. A lebegtetett elemed továbbra is lebeg, de a törölt elem alatta jelenik meg a weben oldalon.

Példa

Ez a példa balra törli az úszót. Itt ez azt jelenti, hogy a elem a bal oldali lebegtetett elem alá kerül:

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

Próbálja ki Ön is →

<!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>

A clearfix Hack

Ha egy lebegtetett elem magasabb, mint a tartalmazó elem, akkor az "túlcsordul" a tartályán kívül. Ezután hozzáadhatunk egy clearfix hacket oldd meg ezt a problémát:

Without Clearfix

With Clearfix

Példa

.clearfix {
  overflow: auto;
}

Próbálja ki Ön is →

<!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>

A túlcsordulás: auto clearfix mindaddig jól működik, amíg kézben tudja tartani a margókat és a kitöltést (egyébként görgetősávokat láthat). A Az új, modern clearfix hack használata azonban biztonságosabb, és a legtöbb weboldal a következő kódot használja:

Példa

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

Próbálja ki Ön is →

<!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>

Egy későbbi fejezetben többet megtudhat a ::after pszeudoelemről.