Ιδιότητα float

Η ιδιότητα float - ορίζει πλωτά μπλοκ που το κείμενο θα περιρέει. Η ιδιότητα float μερικές φορές χρησιμοποιείται από κοινού με την ιδιότητα clear, η οποία ακυρώνει την πλεύση του στοιχείου.

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

Σύνταξη

cssεπιλογέας {
  float: left | right | none;
}

cssεπιλογέας {
  clear: both | left | right | none;
}

Τιμές για float

Τιμή	Περιγραφή
`left`	Το μπλοκ θα πλέει αριστερά και το κείμενο θα το περιρέει δεξιά.
`right`	Το μπλοκ θα πλέει δεξιά και το κείμενο θα το περιρέει αριστερά.
`none`	Δεν υπάρχει πλεύση.

Προεπιλεγμένη τιμή: none.

Τιμές για clear

Τιμή	Περιγραφή
`left`	Ακυρώνει την πλεύση από αριστερά.
`right`	Ακυρώνει την πλεύση από δεξιά.
`both`	Ακυρώνει την πλεύση τόσο αριστερά, όσο και δεξιά.
`none`	Δεν ακυρώνει την πλεύση.

Προεπιλεγμένη τιμή: none.

Παράδειγμα

Χρησιμοποιούμε το float μη τυπικά, τοποθετώντας τα στοιχεία λίστας στη σειρά:

html<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

cssli {
  float: left;
  border: 1px solid red;
}

Результат:

Δείτε επίσης

η ιδιότητα clear,
που ακυρώνει το float για υψηλότερα στοιχεία