CSS float e gestione blocchi...

-Emanuele

Ciao, sto cercando di capire come funziona il float e la gestione degli elementi che ne fanno uso. Sono giunto a un comportamento che non sono in grado di comprendere e mi da parecchio fastidio in quanto è probabile che me lo ritroverò in situazioni più complesse, quindi chiedo un aiuto a comprendere, Grazie.

Ho creato 4 blocchi div, il 5 è una prova per capire il comportamento. Li ho messi dentro un blocco container di nome div0 per poterli gestire.

Ho notato che se li metto tutti in float: left; lo sfondo di div0 sparisce, sembra quasi che si disabiliti la proprietà backgroud-color: orange. Poi se capita in altri contesti senza usare float non so... Vorrei capire perché fa così e come risolvere....

Per capirlo basta togliere div5 dal codice html...

Questa cosa non la fa nei seguenti casi:

Metto il div5 vuoto come da codice (da togliere se volete vedere gli effetti).

Metto una altezza a div0 e va solo se è in px, con altre unità di misura non funziona (% o auto), ho provato overflow ma non conta nulla.

Mi sembrava di averne trovata un'altra ma ora l'ho scordata

, se mi viene in mente la integro...

Metto il codice così si può provare e capire il problema:

HTML

Codice: Seleziona tutto


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="Prova.css" <<type="text/css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div class="div0">
  <div class="div1"><p>Prova Div1</p></div>
  <div class="div2"><p>Prova Div2</p></div>
  <div class="div3"><p>Prova Div3</p></div>
  <div class="div4"><p>Prova Div4</p></div>
  <div class="div5"></div>

</div>
</body>
</html>

CSS in un file separato chiamato Prova.css

Codice: Seleziona tutto


.div0 {width:95%; background-color: orange;}

.div1{background-color: red; width:20%; float: left;}

.div2{width:20%; float: left;}

.div3{background-color: yellow; width:20%; float: left;}

.div4{background-color: green; width:10%; float: left;}

.div5{clear: left;}

Messaggio da **Zoff** » giovedì 29 dicembre 2016, 16:15

-Emanuele [url=http://forum.ubuntu-it.org/viewtopic.php?p=4945845#p4945845][img]http://forum.ubuntu-it.org/images/icons/icona-cita.gif[/img][/url] ha scritto: Ho notato che se li metto tutti in float: left; lo sfondo di div0 sparisce, sembra quasi che si disabiliti la proprietà backgroud-color: orange. Poi se capita in altri contesti senza usare float non so... Vorrei capire perché fa così e come risolvere....

Per capirlo basta togliere div5 dal codice html...

Questa cosa non la fa nei seguenti casi:

Metto il div5 vuoto come da codice (da togliere se volete vedere gli effetti).

Metto una altezza a div0 e va solo se è in px, con altre unità di misura non funziona (% o auto), ho provato overflow ma non conta nulla.

Mi sembrava di averne trovata un'altra ma ora l'ho scordata , se mi viene in mente la integro...

Il posizionamento float "stacca" l'elemento dal flusso normale dei componenti, gli elementi che lo usano fanno riferimento al primo parent che ha posizionamento relativo o assoluto (quello predefinito è "static").

Quindi:

Codice: Seleziona tutto

<style> .fl { float: left; } .container { background-color: red; }</style>
<div class="container">
    <div class="fl">AAA</div>
    <div class="fl">BBB</div>
    <div class="fl">CCC</div>
</div>

è visualmente identico a:

Codice: Seleziona tutto

<style> .fl { float: left; } .container { background-color: red; } </style>
<div class="container"></div>
<div class="fl">AAA</div>
<div class="fl">BBB</div>
<div class="fl">CCC</div>

con la sola differenza che gerarchicamente i div con classe fl restano figli del dic con classe container.

Se vuoi che un elemento prenda posizione in funzione dei precedenti elementi con float puoi usare clear. Che significa posizionati dopo tutti i float che stanno nella posizione indicata (left, right, both). Se l'elemento con questa proprietà non è floating allora concorre al calcolo della dimensione del parent.

Codice: Seleziona tutto

<style> .fl { float: left; } .container { background-color: red; } .cb { clear: both; }</style>
<div class="container">
    <div class="fl">AAA</div>
    <div class="fl">BBB</div>
    <div class="fl">CCC</div>
    <div class="cb"></div>
</div>

Il punto quindì è: non è lo sfondo a cambiare colore/visibilità ma la dimensione (altezza) dell'elemento.

-Emanuele

Ciao e grazie per la risposta, non ho provato ciò che hai scritto per ora, ma penso di aver capito il motivo che mi hai suggerito riguardo lo sfondo che non si colora. In pratica essendo tutti float sono tutti scollegati dal flusso anche se seguono quello parent (nel mio caso dovrebbe essere html o root) e per tale motivo div0 è come se fosse vuoto e quindi in tale condizione di default l'altezza è zero con conseguente non visibilità dello sfondo.

La difficoltà nel gestire queste cose mi pare stia proprio quà: comprendere il comportamento degli elementi in determinate situazioni e ricordare le loro proprietà.

Forum Ubuntu-it