Διάταξη CSS - αιωρούμενη και καθαρή

Πίνακας περιεχομένων

Η ιδιότητα CSS float καθορίζει πώς ένα στοιχείο πρέπει να επιπλέει.

Η ιδιότητα διαγραφή CSS καθορίζει ποια στοιχεία μπορούν να επιπλέουν δίπλα στο καθαρισμένο στοιχείο και σε ποια πλευρά.

Το float Property

Η ιδιότητα float χρησιμοποιείται για τοποθέτηση και μορφοποίηση περιεχομένου π.χ. αφήστε μια εικόνα να επιπλέει αριστερά στο κείμενο σε α δοχείο.

Η ιδιότητα float μπορεί να έχει ένα από τα οι ακόλουθες τιμές:

left: - Το στοιχείο επιπλέει στα αριστερά του δοχείου του
right: - Το στοιχείο επιπλέει στα δεξιά του κοντέινερ του
none: - Το στοιχείο δεν αιωρείται (θα εμφανίζεται ακριβώς εκεί που εμφανίζεται στο κείμενο). Αυτό είναι προεπιλογή
inherit: - Το στοιχείο κληρονομεί την τιμή float του γονέα του

Στην απλούστερη χρήση της, η ιδιότητα float μπορεί να χρησιμοποιηθεί για την αναδίπλωση κειμένου γύρω από εικόνες.

Παράδειγμα - float: δεξιά;

Το ακόλουθο παράδειγμα προσδιορίζει ότι μια εικόνα πρέπει να επιπλέει προς τα δεξιά σε ένα κείμενο:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Παράδειγμα

img {
  float: right;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<h2>Float Right</h2>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Παράδειγμα - float: αριστερά;

Το παρακάτω παράδειγμα προσδιορίζει ότι μια εικόνα πρέπει να επιπλέει προς τα αριστερά σε ένα κείμενο:

Παράδειγμα

img {
  float: left;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>

<h2>Float Left</h2>

<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Παράδειγμα - Χωρίς πλωτήρα

Στο παρακάτω παράδειγμα η εικόνα θα εμφανιστεί ακριβώς στο σημείο που εμφανίζεται το κείμενο (float: none;):

Παράδειγμα

img {
  float: none;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: none;
}
</style>
</head>
<body>

<h2>Float None</h2>

<p>In this example, the image will be displayed just where it occurs in the text (float: none;).</p>

<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Παράδειγμα - Επιπλέουν ο ένας δίπλα στον άλλο

Κανονικά τα στοιχεία div θα εμφανίζονται το ένα πάνω στο άλλο. Ωστόσο, αν εμείς χρησιμοποιήστε το float: left μπορούμε να αφήσουμε τα στοιχεία να αιωρούνται το ένα δίπλα στο άλλο:

Παράδειγμα

 div {
  float: left;
  padding: 15px; 
}
.div1 {
  
  background: red;
}
.div2 {
  background: yellow;
}
  
.div3 {
  background: green;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  float: left;
  padding: 15px; 
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}
</style>
</head>
<body>

<h2>Float Next To Each Other</h2>

<p>In this example, the three divs will float next to each other.</p>

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

</body>
</html>