lo stile del div figlio influenza anche il padre e/o i div esterni ?

**Miscio** · 05-11-2010, 13:50

Salve a tutti pongo una domanda semplice:

ho creato questo file html come esempio

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento senza titolo</title>

</head>



<body>

<div style="float:left; width:250px; height:100px; background-color:#F00">

    Testo di prova

</div>

<div style="float:right; width:250px; height:100px; background-color:#096">

    Testo di prova

</div>



<div style="width:250px; height:100px; background-color:#FC0">

    <div style="width:250px; background-color:#C0C";>

        Testo di prova

    </div>

    <div style="clear:both;">

    </div>

    <div style="width:250px; background-color:#C0C";>

        Testo di prova

    </div>    

</div>

</body>

</html>

lo stile clear:both influenza anche i 2 div esterni che si posizionano a destra e a sinistra della pagina e il risultato è che il div centrale viene spostato al di sotto di essi.

come se il div figlio influenza il padre

mi è gia capitato anche in altri siti che altri stili tipo margin-top:15px ecc... dichiarati in un div influenzassero il div padre che conteneva lo stesso div e i div esterni come in questo caso

qualcuno mi sa dare qualche info ? è normale sbaglio io nella dichiarazione dei css?

grazie

**Prill** · 05-11-2010, 15:32

Ciao Miscio, i primi due div si dispongono a destra e a sinistra della pagina perché hai assegnato loro un float right e left. Il terzo div si dispone al di sotto degli altri perché questo gli hai detto di fare con il clear. L'interruzione del floating va inserita dopo la serie degli elementi flottanti, non al loro interno.
Se devi avere tre colonne affiancate, da racchiudere in un contenitore per evitare che se ne vadano a spasso per la pagina, si potrebbe avere una cosa del genere (lascio le dichiarazioni di stile in linea così che si veda meglio)

codice:

<body>
<div style="width:750px; margin:0 auto; background-color: #0c0;">
  <div style="float:left; width:250px; height:100px; background-color:#f00;">div sinistro</div>
  <div style="float:right; width:250px; height:100px; background-color:#f00;">div destro</div>
  <div>
    <div style="background-color:#C0C; padding:0 15px;">Testo di prova</div>
    <div style="background-color:#C0C; padding:0 15px;">Testo di prova</div>
  </div>
  <div style="clear:both"></div>
</div>
</body>

**Miscio** · 08-11-2010, 10:53

Codice PHP:




Grazie per le info.

Ma se complicassi la struttura il clear:both influenza tutta la struttura? anche i div esterni ?



e come mai se invece del clear:both usavo il margin in div inetrno questo influenza il div padre che lo conteneva ?





grazie





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento senza titolo</title>

</head>

<body>

<div style="width:750px; margin:0 auto; background-color: #0c0;">



  <div style="float:left; width:250px; height:100px; background-color:#f00;">div sinistro</div>

  <div style="float:right; width:250px; height:100px; background-color:#f00;">div destro</div>

  <div style="background-color:#C93">

  ---

    <div style="background-color:#C0C; padding:0 15px;">Testo di prova</div>

    <div style="background-color:#C0C; padding:0 15px;">Testo di prova</div>

      <div style="float:left; width:50px; height:100px; background-color:#f00;">div sinistro</div>

      <div style="float:right; width:50px; height:100px; background-color:#f00;">div destro</div>

      <div>

        <div style="background-color:#C0C; padding:0 15px;">Testo di prova</div>

        <div style="background-color:#C0C; padding:0 15px;">Testo d2i prova</div>

      </div>    

      <div style="clear:both">--</div>                  

  </div>

  <div style="clear:both"></div>

</div>

</body>

</html>

**Prill** · 08-11-2010, 14:47

Ho saltato nel codice postato la dichiarazione di stile per il div che sale al centro, con la sua larghezza e un margin-left corrispondente alla larghezza del div sinistro, da inserire.

L'omissione del clear dopo elementi flottanti può portare a una visualizzazione non voluta degli elementi seguenti che continuano il float anche se non erano intesi per farlo.

Un margine impostato su un div del quale sia specificata la larghezza determina un suo allargamento perché nella larghezza totale sono computati margini, padding e border

**Mich_** · 09-11-2010, 09:27

In effetti il clear influenza tutta la pagina, anche i blocchi che stanno fuori a quello che si vuole "clearare".

Ci sono due soluzioni possibili:
1. Usare il float:left per i soli blocchi esterni ed il float:right per quelli interni (o viceversa): in tal modo si puo` usare il clear:left rispettivamente :right per annullare il float della sola parte interessata. E` un trucchetto semplicissimo ma non sempre applicabile, purtroppo: dipende da come sono posizionati i vari blocchi

2. Usare il posizionamento assoluto per i blocchi piu` esterni: e` una soluzione piu` complessa, perche` il posizionamento ha degli effetti collaterali che a volte intervengono solo in particolari combinazioni di brwoser, dimensioni, font; pertanto e` sconsigliabile a chi inizia con i CSS

Discussione: lo stile del div figlio influenza anche il padre e/o i div esterni ?

Strumenti discussione

Ricerca discussione

Visualizza

lo stile del div figlio influenza anche il padre e/o i div esterni ?

garzie

Permessi di invio