Elementi fluttuanti tutorial


Come notato in precedenza, gli elementi di blocco occupano l'intera larghezza dello spazio consentito (l'elemento figlio) e iniziano anche con una nuova riga. Inoltre, tutti gli elementi dopo il blocco iniziano anche con una nuova riga nel layout della pagina web.

Se si aggiusta la larghezza di un elemento usando la proprietà width , quindi è possibile impostare il flusso intorno a questo elemento da altri. Questa proprietà ha il nome float , come sembra che l'elemento " плывет "nell'ambiente di altri elementi - a sinistra oa destra. Quindi, questa proprietà ha due valori di base - left o right . Con il valore left l'elemento viene premuto sul bordo sinistro e il flusso attorno agli altri elementi avviene lungo il suo bordo destro. Con il valore right - tutto intorno. Si noti che è necessario impostare la larghezza dell'elemento per farlo. anche float può fare la differenza none - è installato di default.



Vediamo che il testo all'esterno del blocco si trova a destra di esso. In assenza di una regola float:left Questo testo dovrebbe essere posizionato sotto il blocco, in base alle proprietà degli elementi di blocco.

Per annullare il wrapping, basta inserire l'elemento con la regola chiaro: entrambi dopo l'elemento con la regola float . proprietà clear Ottimizza lo snellimento degli elementi indicati dopo. valore both significa che qualsiasi ottimizzazione - a sinistra oa destra - verrà annullata. proprietà clear può anche assumere valori left o right - per cancellare lo stesso valore di proprietà float . Questa regola viene spesso utilizzata per inserire una linea vuota tra due elementi mobili.



Proprietà float ha le sue caratteristiche, che possono portare a risultati inaspettati. Uno di questi è la seguente situazione. Supponiamo di mettere un blocco in un altro, e il blocco interno ha una regola float: left



Vediamo che l'unità fluttuante non trattiene effettivamente quella esterna e va oltre i suoi limiti. Per correggere questo effetto, devi aggiungere una regola

overflow: hidden;


per blocco bar :

Проверьте свои знания
Creare regole di stile alla classe fiore, in base al quale l'oggetto sarà "galleggiare" sulla destra. Crea le seguenti regole di stile per il tag img all'interno del blocco di questa classe: height 50px; rientro esterno a sinistra 50 px. Usando il disegno unità inserto con fiori modello nell'intestazione modo che si appoggi contro il bordo sinistro dell'intestazione. Il cartamodello deve essere posizionato in un blocco della classe dei fiori. Posiziona il file immagine nella cartella img nella root del progetto. Crea un tag modulo. All'interno del blocco modulo di contatto prima che il modulo per inserire il testo del titolo Modulo di contatto, colore del testo # 403E3F.