Come funziona il CSS di compensazione funziona davvero?

Question

Ho un <div> che vorrei essere su una riga.Secondo W3Schools, questa regola:

div.foo {
  clear: both;
}

...dovrebbe significare questo:

"No elementi flottanti ammessi sulla sinistra o a destra."

Tuttavia, se I float due <div> elementi di sinistra, e applicare la regola di cui sopra per il primo, il secondo non si muove.

D'altra parte, se applico "clear: left" per il secondo <div>, si sposta alla riga successiva.Questo è il mio approccio normale, ma non capisco perché devo fare questo.

È il W3Schools descrizione poco sopra detto, o mi manca qualcosa? È una radura regola solo in grado di spostare l'elemento a cui è applicato?

Risposta

Grazie Michele S e Giovanni D per il bene di spiegazioni.Warren ha sottolineato i CSS2 spec, e che è dove ho trovato questa risposta (sottolineatura mia):

Questa proprietà indica che i lati di un elemento della casella(es), non può essere adiacente ad un in precedenza finestra mobile.

Così: clear riguarda solo la posizione dell'elemento a cui è applicato, relative a elementi che appaiono prima del codice.

Deludente il fatto che io non riesco a dire la mia <div> per fare altri div spostare verso il basso, ma queste sono le pause.:)

Answer 1

Quando si applica chiara per un elemento, si sposta l'elemento in modo che non si dispone di elementi di sinistra o di destra.Non si ri-posizionare qualsiasi altri elementi, semplicemente sposta l'elemento in una posizione in cui nulla è intorno ad esso.

Modifica

Partite sopra l'elemento cancellato non vengono spostati, gli elementi al di sotto dell'elemento PUÒ essere spostato.Notare anche le ulteriori commenti

Answer 2

Il css è l'analisi di "correttamente". Il secondo div è ancora galleggiava a sinistra, quindi, anche dopo aver cancellato la prima, se c'è spazio pedane in larghezza per il secondo, si adatta galleggiava a sinistra al punto più alto possibile.

Answer 3

Sì, solo compensazione sposta l'elemento a cui è applicato.Tuttavia, il risultato si sente diverso, a seconda se l'elemento è "nel flusso" o di flusso.Credo che ti confonde.

Se l'elemento è nel flusso, la compensazione si muove insieme con tutto ciò che ne segue.Pensate a come muoversi posizione corrente della penna (il luogo in cui l'elemento successivo dovrebbe essere collocato in basso.Questo comportamento è facile da interpretare.

Se l'elemento è fuori portata, come il galleggiante nel tuo esempio, solo l'elemento viene spostato, la penna posizione rimane allo stesso posto, a meno che altre regole di farli spostare.Per esempio, un mobile non è consentito avviare al di sopra di una precedente galleggiante.

C'è anche un disordinato problema del margine di crollare.Compensazione li interrompe, a volte in un modo istintivo.

Answer 4

Si applica chiaro l'elemento che si desidera su una nuova linea.Chiaro che si utilizza dipende dagli elementi che non si vuole toccare.Se si desidera che l'Immagine B di essere su una nuova linea e non tocco Immagine (che permette di dire che è " float:a sinistra), si dovrebbe mettere l'Immagine B come {clear:a sinistra}} non è chiaro a destra, come si sarebbe naturalmente pensare.Si sta cancellando il galleggiante dell'elemento precedente.

Answer 5

Io di solito per effettuare le seguenti operazioni per l'effetto:

float: left;
clear: right;

Non so se vale solo per l'elemento a cui è applicato, anche se ha senso.

Le specifiche sono disponibili qui: http://www.w3.org/TR/REC-CSS2/