Gli elementi fluttuanti non aumentano l'altezza dell'elemento contenitore e, quindi, se non li cancelli, l'altezza del contenitore non aumenta ...
Ti faccio vedere visivamente:
Più spiegazione:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
Puoi anche aggiungere overflow: hidden;elementi contenitore, ma ti suggerisco di usare clear: both;invece.
Inoltre, se desideri cancellare automaticamente un elemento, puoi utilizzarlo
.self_clear:after {
content: "";
clear: both;
display: table;
}
Come funziona CSS Float?
Cos'è esattamente il galleggiante e cosa fa?
La floatproprietà è fraintesa dalla maggior parte dei principianti. Bene, cosa fa esattamente float? Inizialmente, la floatproprietà è stata introdotta per far fluire il testo attorno alle immagini, che sono mobili lefto right. Ecco un'altra spiegazione di @Madara Uchicha.
Quindi, è sbagliato usare la floatproprietà per posizionare le scatole fianco a fianco? La risposta è no ; non ci sono problemi se si utilizza la floatproprietà per impostare le caselle affiancate.
Un elemento mobile inlineo blocklivellato farà sì che l'elemento si comporti come un inline-blockelemento.
dimostrazioneSe si sposta un elemento lefto right, l' widthelemento dell'elemento sarà limitato al contenuto che contiene, a meno che non widthsia definito esplicitamente ...
Non puoi floatun elemento center. Questo è il problema più grande che abbia sempre visto con i principianti float: center;floatproprietà. floatviene generalmente utilizzato per float/ spostare i contenuti all'estrema sinistra o all'estrema destra . Esistono solo quattro valori validi per la floatproprietà left, ad esempio right, none(predefinito) e inherit.
L'elemento genitore collassa, quando contiene elementi figlio fluttuati, per evitare ciò, usiamo la clear: both;proprietà, per cancellare gli elementi flottanti su entrambi i lati, il che impedirà il collasso dell'elemento genitore. Per ulteriori informazioni, puoi fare riferimento qui alla mia altra risposta .
(Importante) Pensaci dove abbiamo una pila di vari elementi. Quando usiamo float: left;o float: right;l'elemento si sposta sopra la pila di uno. Quindi gli elementi nel normale flusso di documenti si nasconderanno dietro gli elementi fluttuati perché si trovano a livello di pila sopra i normali elementi fluttuati. (Per favore, non fare riferimento a questo z-indexperché è completamente diverso.)
Prendendo come esempio un caso per spiegare come funzionano i float CSS, supponendo che abbiamo bisogno di un semplice layout a 2 colonne con intestazione, piè di pagina e 2 colonne, quindi ecco come appare il progetto ...
Nell'esempio sopra, fluttueremo solo le caselle rosse, o puoi floatsia sul left, oppure puoi floatsu left, e anche un altro right, dipende dal layout, se sono 3 colonne, puoi float2 colonne leftdove un'altra uno rightdipende così, anche se in questo esempio, abbiamo un layout semplificato a 2 colonne, quindi floatuno a lefte l'altro a right.
Markup e stili per la creazione del layout spiegati più in basso ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Andiamo passo dopo passo con il layout e vediamo come funziona float.
Prima di tutto, usiamo l'elemento wrapper principale, puoi solo supporre che sia il tuo viewport, quindi usiamo headere assegniamo un heightdi 50pxcosì niente di speciale. È solo un normale elemento a livello di blocco non flottante che occuperà 100%spazio orizzontale a meno che non sia flottato o non gli assegniamo inline-block.
Il primo valore valido per floatè leftcosì nel nostro esempio, che utilizziamo float: left;per .floated_left, quindi intendiamo spostare un blocco leftsull'elemento del nostro contenitore.
La colonna galleggiava a sinistra
E sì, se vedi, l'elemento genitore, che è .wrappercompresso, quello che vedi con un bordo verde non si è espanso, ma dovrebbe essere giusto? Torneremo su questo tra un po ', per ora, abbiamo fatto galleggiare una colonna left.
Venendo alla seconda colonna, lascia che floatquesto allaright
Un'altra colonna galleggiava a destra
Qui, abbiamo 300pxun'ampia colonna che noi floatal right, che siederà accanto alla prima colonna mentre galleggia sul left, e poiché è fluttuato sul left, ha creato una grondaia vuota sul right, e poiché c'era ampio spazio sul right, il nostro rightl'elemento flottante era perfettamente posizionato accanto a leftquello.
Tuttavia, l'elemento genitore è compresso, bene, risolviamolo ora. Esistono molti modi per impedire che l'elemento genitore venga compresso.
- Aggiungi un elemento a livello di blocco vuoto e utilizzalo
clear: both;prima della fine dell'elemento genitore, che contiene elementi fluttuanti, ora questo è una soluzione economica per i cleartuoi elementi fluttuanti che farà il lavoro per te ma, ti consiglio di non usarlo.
Aggiungi, <div style="clear: both;"></div>prima delle .wrapper divestremità, come
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
dimostrazione
Bene, questo risolve molto bene, nessun genitore compresso più, ma aggiunge un markup non necessario al DOM, quindi alcuni suggeriscono di usarlo overflow: hidden;sull'elemento genitore che contiene elementi figlio fluttuati che funzionano come previsto.
Usa overflow: hidden;su.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
dimostrazione
Ciò ci consente di risparmiare un elemento ogni volta che è necessario, clear floatma quando ho testato vari casi con questo, ha fallito in uno specifico, che utilizza box-shadowgli elementi figlio.
Demo (impossibile vedere l'ombra su tutti e 4 i lati,overflow: hidden;causa questo problema)
Così quello che ora? Salvare un elemento, no, overflow: hidden;quindi andare per un chiaro hack di correzione, utilizzare lo snippet di seguito nel CSS e, proprio come si usa overflow: hidden;per l'elemento genitore, chiamare il classseguente elemento genitore per auto-cancellare.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
dimostrazione
Qui, l'ombra funziona come previsto, inoltre, cancella automaticamente l'elemento genitore che impedisce il collasso.
E infine, usiamo il piè di pagina dopo che abbiamo cleargli elementi fluttuanti.
dimostrazione
Quando viene float: none;comunque utilizzato, in quanto predefinito, quindi è utile dichiararlo float: none;?
Bene, dipende, se stai cercando un design reattivo, userai questo valore molte volte, quando vuoi che gli elementi fluttuati vengano visualizzati uno sotto l'altro a una certa risoluzione. Perché quella float: none;proprietà gioca un ruolo importante lì.
Pochi esempi del mondo reale di quanto floatsia utile.
- Il primo esempio che abbiamo già visto è quello di creare uno o più layout di una colonna.
- Usando
imgfloating all'interno pche consentirà al nostro contenuto di fluire.
Demo (senza galleggianteimg)
Demo 2 (imgfluttuato suleft)
- Utilizzo
floatper la creazione di menu orizzontale - Demo
Float anche il secondo elemento, oppure usa `margin`
Ultimo ma non meno importante, voglio spiegare questo caso particolare in cui floatsolo un singolo elemento leftma non floatl'altro, quindi cosa succede?
Supponiamo che se rimuoviamo float: right;dal nostro .floated_right class, la divvolontà sarà resa dall'estremo in leftquanto non è flottata.
dimostrazione
Quindi, in questo caso, sia possibile floatla al leftpure
O
È possibile utilizzare margin-leftquale sarà uguale alla dimensione della colonna mobile a sinistra, ovvero 200pxlarga .