CSS-layout - overskueligt og klart

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS-egenskaben clear

Når vi bruger egenskaben float, og vi ønsker det næste element nedenfor (ikke til højre eller venstre), bliver vi nødt til at bruge clear ejendom.

Egenskaben clear angiver hvad skal ske med det element, der er ved siden af et flydende element.

Egenskaben clear kan have en af følgende værdier:

none

- Elementet skubbes ikke under venstre eller højre flydende elementer. Dette er standard

left

- Elementet skubbes under venstre flydende elementer

right

- Elementet skubbes under højre flydende elementer

both

- Elementet skubbes under både venstre og højre flydende elementer

inherit

- Elementet arver den klare værdi fra sin forælder

Når du rydder flydere, bør du matche clearet til flyderen: Hvis et element er svævet til venstre, så skal du rydde til venstre. Dit flydende element vil fortsætte med at flyde, men det ryddede element vises under det på nettet side.

Eksempel

Dette eksempel rydder flyderen til venstre. Her betyder det, at element skubbes under det venstre flydende element:

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

Prøv det selv →

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

Clearfixet Hack

Hvis et flydende element er højere end det indeholdende element, er det vil "flyde over" uden for sin beholder. Vi kan derefter tilføje et clearfix-hack til løse dette problem:

Without Clearfix

With Clearfix

Eksempel

.clearfix {
  overflow: auto;
}

Prøv det selv →

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

Clearfixet overflow: auto fungerer godt, så længe du er i stand til at holde styr på dine marginer og polstring (ellers kan se rullepaneler). Det nyt, moderne clearfix-hack er dog mere sikkert at bruge, og følgende kode bruges til de fleste websider:

Eksempel

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

Prøv det selv →

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

Du vil lære mere om ::after pseudo-elementet i et senere kapitel.