Flex

Flex

Flex o flexbox CSS, come spiegato nella precedente lezione consente di creare layout molto più semplici da gestire grazie alle proprietà che si possono assegnare.

Analizziamo in dettaglio queste proprietà.

Display flex

Questa proprietà dei CSS serve ad impostare il contenitore padre in maniera flessibile.

Quindi tutti gli elementi che sono figli di un contenitore che possiedono la seguente proprietà potranno assumere determinati comportamenti dettati dall’elemento padre.

Se impostiamo questa proprietà possiamo applicare anche le seguenti proprietà sotto elencate.

Flex direction

Questa proprietà, che chiaramente funziona se l’elemento è flessibile, serve a specificare la direzione dell’asse principale (main-axis) dove si dispongono i box flessibili nel contenitore.

I valori possibili che si possono assegnare sono: row, row-reverse, column, column-reverse.

Quindi in definitiva gli elementi interni possono essere disposti orizzontalmente per righe (row) dove dunque il main-axis è l’asse orizzontale (l’asse x) oppure verticalmente per colonne (column) dove dunque il main-axis è l’asse verticale (l’asse y).

L’ordine può essere quello predefinito da sinistra verso destra oppure inverso (row-reverse e column-reverse).

Di seguito un semplicissimo esempio di utilizzo:


.flex-container {
  display: flex;
  flex-direction:column;
}

Al seguente link troverete una guida dettagliata di questa proprietà: https://www.codingcreativo.it/flex-direction/.

Flex wrap

Tramite questa proprietà, si specifica se i box all’interno del contenitore padre devono essere disposti su un’unica riga oppure su più righe, nel caso in cui il main-axis sia l’asse orizzontale.

Mentre nel caso in il main-axis sia l’asse verticale, si specifica se i box all’interno del contenitore possono essere disposti su più colonne.

I valori possibili sono: nowrap, wrap, wrap-reverse.

Sia per gli elementi disposti orizzontalmente, sia per gli elementi disposti verticalmente, il valore di default è nowrap. Ovvero gli elementi prendono tutto lo spazio necessario senza andare in una nuova riga o colonna.

Se specifichiamo invece il valore wrap, se il main-axis è l’asse orizzontale quando si raggiunge la fine della riga, automaticamente gli elementi successivi si posizionano sulla riga successiva. Allo stesso modo, se invece il main-axis è quello verticale quando si raggiunge la fine della colonna, automaticamente gli elementi successivi si posizionano sulla colonna successiva.

Se si utilizza wrap-reverse la disposizione degli elementi avviene in ordine inverso.

Ecco un semplice esempio d’utilizzo:


.flex-container {
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
}

Al seguente link troverete una guida dettagliata di questa proprietà: https://www.codingcreativo.it/flex-wrap/.

Flex flow

Questa proprietà una proprietà di sintassi abbreviata per esprimere assieme le due proprietà flex-direction e flex-wrap.

Justify content

Justify-content è la proprietà che serve a stabilire come allineare i box flessibili sull’asse principale del contenitore. I valori ammissibili sono: flex-start, flex-end, center, space-between, space-around e space-evenly. Con queste proprietà lo spazio libero di fine riga può essere ridistribuito.


.flex-container {
  display: flex;
  flex-direction:row; /* valore di default, si può omettere */
  justify-content: center;
}

Align items

align-items: questa proprietà, degli elementi flexbox, serve a stabilire come allineare i box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center e baseline.

Se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.


.flex-container {
  display: flex;
  flex-direction:row; /* valore di default, si può omettere */
  justify-content: center;
  align-items:stretch;
}

Align Content

Align-content è una proprietà che serve solo per i contenitori multi-riga. Infatti serve a stabilire come allineare una riga di box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center, baseline, space-between e space-around.

Anche qui se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.

Conclusioni

Nelle prossime lezioni continueremo ancora a parlare di flex parlando in dettaglio di tutte le proprietà elencate ed inoltre introdurremo le proprietà che si applicano ai box flessibili.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Menù responsive

Menù responsive

In questa lezione realizzeremo un menù responsive utilizzando html5 e css3.

In particolare ad una risoluzione minore o uguale di 768 pixel si vedrà quello che spesso viene definitivo humburger menù, rappresentato da 3 barre orizzontali in un unico quadrato. Ad un risoluzione maggiore di 768 pixel invece si vedrà la navbar regolarmente.

Menù responsive esempio

In questo esempio quindi inseriamo nella pagina html il tag semantico header e creiamo un div header-top dove inseriamo due colonne, una che contiene il logo, l’altra che contiene il menù di navigazione.

Entrambe le colonne flotteranno a sinistra, dunque ho bisogno del clearfix per ripulire dal flusso il tutto.

Nella prima colonna inserisco solo il logo, mentre nella seconda colonna inserisco tutto il menù di navigazione.

<header>
    <div class="header-top container clearfix">

      <div class="logo float-left">
        <img src="img/coding_creativo.png" alt="coding creativo">
      </div>

      <div class="nav-menu float-left">
        <nav>
          <ul>
            <li><a href="#">Alogritmi</a></li>
            <li><a href="#">JavaScript tutorial</a></li>
            <li><a href="#">Tutorial HTML 5</a></li>
            <li><a href="#">Tutorial CSS 3</a></li>
          </ul>
        </nav>
      </div>
 
    </div>
  </header>

Dopo inseriamo, sempre nella pagina html, nella sezione dedicata ai collegamenti CSS, il collegamento a Fontawesome, per utilizzare poi l’icon bars.

Menù responsive – creazione del foglio di stile

Adesso programmiamo il CSS in modo da ottenere il risultato desiderato.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

Poi inseriamo le regole per formattare la navbar. Come primo passo togliamo i margini ed il padding a tutti gli elementi html.

Utilizziamo la max-width affinché la larghezza non sia mai maggiore di 1060 pixel e che si adatti ai dispositivi con una larghezza inferiore.

Creiamo la classe float left per assegnarla poi alle 2 colonne e la clearfix per assegnarla al contenitore padre. Coloriamo poi l’header, diamo anche un border-bottom ed un’altezza.

Diamo una larghezza alle due colonne in percentuale (cerchiamo di evitare i pixel).

Centriamo l’immagine in verticale utilizzando il vertical-align, e sistemiamo la navbar, togliendo gli elenchi puntati.

Dopo aver fatto questo, programmiamo le media queries necessarie per realizzare il menù responsive.

In particolare utilizzeremo l’after per mostrare l’icona bars di Fontawesome.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1060px;
  margin: auto;
}

.float-left {
  float: left;
}

.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

header {
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid rgb(32, 163, 238);
}

.header-top {
  height: 90px;
  line-height: 90px;
}

.header-top .logo {
  width: 30%;
}

.header-top .logo img {
  padding-left: 10px;
}

.header-top .logo img {
  vertical-align: middle;
}

.nav-menu {
  width: 70%;
  text-align: right;
}

.nav-menu ul {
  list-style: none;
}

.nav-menu ul li {
  display: inline-block;
  padding:0 15px;
}

.nav-menu ul li a{
  text-decoration: none;
  color: #605f33;
  font-size: 20px;
}

.nav-menu ul li a:hover{
  color:  rgb(9, 94, 179);
  text-decoration: underline;
}

@media screen and (max-width:992px){
  .logo img {
    width: 230px;
  }
  .nav-menu ul li a{
    font-size: 18px;
  }
  .nav-menu ul li {
    display: inline-block;
    padding:0 10px;
  }
}

@media screen and (max-width:768px){
  .nav-menu nav{
    display: none;
  }
  .nav-menu::after{
    content: '\f0c9';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    padding-right: 10px;
  }

}

In alternativa potevamo semplicemente inserire l’icona nell’html e renderla nascosta, come nel prossimo esempio.

Menù responsive – secondo esempio

In questo secondo esempio stiamo inserendo semplicemente l’icona direttamente nell’html.

<header>
    <div class="header-top container clearfix">

      <div class="logo float-left">
        <img src="img/coding_creativo.png" alt="coding creativo">
      </div>

      <div class="nav-menu float-left">
        <i class="fas fa-bars"></i>
        <nav>
          <ul>
            <li><a href="#">Alogritmi</a></li>
            <li><a href="#">JavaScript tutorial</a></li>
            <li><a href="#">Tutorial HTML 5</a></li>
            <li><a href="#">Tutorial CSS 3</a></li>
          </ul>
        </nav>
      </div>

    </div>
  </header>

Nel CSS poi intervengo solo sulla proprietà display, nascondendo e visualizzando l’icona.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1060px;
  margin: auto;
}

.float-left {
  float: left;
}

header {
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid rgb(32, 163, 238);
}

.header-top {
  height: 90px;
  line-height: 90px;
}

.header-top .logo img {
  vertical-align: middle;
}

.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

.logo {
  width: 30%;
}

.logo img {
  padding-left: 10px;
}

.nav-menu {
  width: 70%;
  text-align: right;
}

.nav-menu ul {
  list-style: none;
}

.nav-menu ul li {
  display: inline-block;
  padding:0 15px;
}

.nav-menu ul li a{
  text-decoration: none;
  color: #605f33;
  font-size: 20px;
}

.nav-menu ul li a:hover{
  color:  rgb(9, 94, 179);
  text-decoration: underline;
}
.nav-menu i {
  display: none;
}
@media screen and (max-width:992px){
  .logo img {
    width: 230px;
  }
  .nav-menu ul li a{
    font-size: 18px;
  }
  .nav-menu ul li {
    display: inline-block;
    padding:0 10px;
  }
}

@media screen and (max-width:768px){
  .nav-menu nav{
    display: none;
  }
  .nav-menu i {
    display: block;
    line-height: 90px;
    padding: 0 10px;
  }

}

In questa lezione abbiamo visto come creare un menù responsive, nella prossima lezione vedremo come visualizzare il menù al click sull’icona dell’hamburger menù.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Opacity

Opacity

La proprietà opacity nei CSS specifica la trasparenza di un elemento.

Questa proprietà può assumere un valore tra 0,0 e 1,0, estremi inclusi. Più basso è il valore e più trasparente sarà l’elemento a cui è applicata.

Opacity su un’immagine – primo esempio

In questo primo esempio vedremo l’effetto opacity su un’immagine.

Supponiamo di avere un’immagine inserita nella nostra pagina html:

  <img class="img" src="coding-scratch.jpg" alt="scratch">

Dopo nel CSS inseriamo il seguente codice:

.img {
  opacity: 0.5;
}

L’immagine sarà opacizzata del 50%, come da figura sotto:

scratch

Opacity su un’immagine – secondo esempio

In questo secondo esempio, renderemo l’immagine senza opacità quando con il mouse ci sposteremo dentro l’immagine.

Quindi basterà aggiungere questa semplice regola nel css:

.img {
  opacity: 0.5;
  width: 200px;
}
.img:hover {
  opacity: 1;
}

Se provate a passare sopra l’immagine, noterete che l’effetto opacity si toglierà.

scratch

Opacity su un’immagine – terzo esempio

In questo secondo esempio vogliamo creare un blocco colorato e quando passiamo sopra di esso con il mouse, si vuole far vedere l’immagine che sta sotto.

Quindi creiamo un blocco quadrato di 200 pixel a cui assegneremo una classe immagine.

Dopo impostiamo a questo elemento un’immagine di sfondo e la posizioniamo correttamente utilizzando le proprietà delle immagini.

Poi creiamo un elemento all’interno di questo e lo coloriamo in modo da coprirlo del tutto. Assegniamo a questo secondo elemento una classe opaco.

Quindi ecco il codice html di esempio:

<div class="immagine">
    <div class="opaco">

    </div>
</div>

Poi impostiamo le classi opportune nel CSS:

.immagine {
  background-image:url('coding-scratch.jpg');
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
}
.opaco {
  background-color: blue;
  height: 100%;
}
.opaco:hover {
  opacity: 0;
}

Ecco dunque l’effetto ottenuto. Per poterlo visualizzare passare sopra il quadrato blu.

Opacità su un elemento con del testo – quarto esempio

In questa sezione vedremo un esempio con un effetto opacity su un livello che contiene del testo.

Quindi nella pagina html inseriamo un semplice div con del testo riempitivo.


<div class="opaco">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe iusto ullam ea tempore beatae, aperiam maxime ducimus ab asperiores expedita ratione fugit molestiae veritatis inventore! Quo error ducimus delectus, totam.
</div>

Dopo nel CSS applichiamo l’effetto opacità:

.opaco {
  background-color: lightblue;
  height: 200px;
  width: 200px;
  opacity: 0.5;
}
.opaco:hover {
  opacity: 1;
}

Possiamo notare che il testo sarà reso opaco così come lo sfondo blu:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe iusto ullam ea tempore beatae, aperiam maxime ducimus ab asperiores expedita ratione fugit molestiae veritatis inventore! Quo error ducimus delectus, totam.

Per ovviare a questo inconveniente si può utilizzare l’opacità sfruttando l’rgba. Un esempio è stato presentato in questa lezione: opacità con rga.

In questa lezione abbiamo visto dei semplici esempi sull’uso della proprietà opacity dei CSS, nelle prossime lezioni vedremo altri esempi pratici.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

CSS media query

CSS media query

In questa lezione parleremo dei CSS ed in particolare delle media query attraverso alcuni esempi pratici, utili per capirne bene il funzionamento.

Ricordiamo che la media query è una tecnica CSS che permette di creare siti web responsive.

Primo esempio – CSS media query

In questo primo esempio visualizziamo, nella versione desktop, un semplice box quadrato di colore blu. Dopo facciamo in modo che, quando la larghezza è uguale o inferiore a 568 pixel, appaia, nello stesso box contenitore, un’immagine di sfondo al posto del colore precedente.

Nel codice html inseriamo, quindi, solo un elemento a cui assegniamo la classe box, come di seguito:

<div class="box"></div>

Poi nel css assegniamo un’altezza ed una larghezza al box ed un colore di sfondo blu.

Dopo creiamo una regola media query per schermi con larghezza massima di 568 pixel, in modo da impostare un’immagine di sfondo.

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

@media screen and (max-width:568px){
  .box{
    background-image: url('../img/scratch.jpg');
    background-size: cover;
  }
}

Quindi nella versione desktop si vedrà questo rettangolo blu:

Nella versione mobile si vedrà invece un’immagine:

Secondo esempio – CSS media query

In questo secondo esempio costruiamo 4 box e li facciamo visualizzare, nella versione desktop, uno accanto all’altro. Quando poi scendiamo ad una larghezza pari o inferiore a 768 pixel i box si visualizzeranno due per riga.

Ecco dunque il codice html per la creazione dei box:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Nel CSS imposto, quindi, una dimensione del 100% diviso 4 per ciascun box ed un’altezza di 200pixel, un margine di 5 pixel su tutti i lati ed un colore di sfondo blu. Assegno anche il float left per far si che gli elementi si dispongano tutti su una riga.

Nella media query, per i dispositivi che hanno una larghezza massima di 768px, modifico poi solo la larghezza, lasciando invariato tutto il resto.

.container {
  max-width: 768px;
  margin: 0 auto;
}
.box {
  width: calc(100% / 4 - 10px);
  height: 200px;
  margin: 5px;
  background-color: blue;
  float:left;
}

@media screen and (max-width:768px){
  .box {
    width: calc(100% / 2 - 20px);
  }
}

Questo è stato solo un semplice esempio di utilizzo nei CSS delle media query, nelle prossime lezioni proporrò tanti altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Icons CSS

Icons CSS

In questa lezione vedremo come aggiungere le icons CSS nei nostri siti web e dare anche una formattazione opportuna con i fogli di stile.

Ci sono vari metodi per inserire delle icone nei siti web, ma una pratica molto comune è quella di utilizzare una libreria esterna.

Una delle più utilizzate è la libreria Font Awesome.

Icons CSS – come utilizzare le icone nelle pagine web

Come prima cosa occorre include il collegamento alla CDN.

Di seguito indico il link da includere nella sezione head della pagina html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

Dopo, nel punto della pagina desiderato si inserisce il codice html dell’icona scelta sul sito ufficiale: fontawesome.

Ecco un esempio che mostra come inserire delle icons CSS che nel nostro caso sono delle frecce di vari tipi:

  <body>
    <i class="fas fa-arrow-circle-right"></i>
    <i class="far fa-arrow-alt-circle-right"></i>
    <i class="fas fa-long-arrow-alt-right"></i>
    <i class="fas fa-angle-right"></i>
  </body>

Di seguito il risultato visualizzato nel browser delle nostre icons CSS:

icon

In definitiva le classi specificate all’interno del tag i, richiamano uno stile di icona incluso nel file all.min.css, a cui ci siamo collegati tramite cdn.

Possiamo anche dare uno stile alle icone, impostando ad esempio un colore di sfondo, una dimensione del testo, uno stile di carattere ed altre caratteristiche tipiche dei CSS.

Nel prossimo paragrafo vedremo dunque un esempio pratico.

Esempio formattazione icone CSS

In questo esempio di utilizzo delle icons CSS, formatteremo alcune icone a piacere dando un colore ed una dimensione del testo.

Nella pagina html inserisco le icone dell’esempio precedente ed aggiungo una classe che vado a definire poi nel foglio di stile.

Questo dunque il codice html di esempio è questo:

  <body>
    <i class="fas fa-arrow-circle-right yellow"></i>
    <i class="far fa-arrow-alt-circle-right red"></i>
    <i class="fas fa-long-arrow-alt-right blue"></i>
    <i class="fas fa-angle-right green"></i>

  </body>

Questo invece il CSS:

.yellow {
  color: yellow;
  font-size: 20px;
}

.red {
  color: red;
  font-size: 24px;
}

.blue {
  color: blue;
  font-size: 28px;
}

.green {
  color: green;
  font-size: 40px;
}

Chiaramente il CSS deve essere opportunamente collegato alla pagina html.

Il risultato ottenuto sarà quindi come quello dell’immagine sotto:

icons

In questa lezione abbiamo visto dei semplici esempi sull’utilizzo delle icons CSS, nelle prossime lezioni vedremo tanti altri esempi pratici.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Border radius CSS

Float e clear

Float e clear

Oggi parleremo di float e clear nei CSS e faremo degli esempi su come utilizzare assieme queste due proprietà.

Esempi d’uso float e clear

Facciamo un esempio in riferimento all’esempio con i float affrontato nella lezione precedente: float css.

Modifichiamo il codice html inserendo del testo, mentre nel codice CSS togliamo la larghezza e l’altezza del container.

Di seguito ecco la pagina html che contiene un contenitore con dentro uno span con del semplice testo e poi 3 box a cui assegniamo le proprietà float left e float right.

<!DOCTYPE html>
<html lang="en">
<head>
  <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>Esempio con i float</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div class="container">
    <span>ciao da coding creativo</span>
    <div class="box red float-right">1 float-right</div>
    <div class="box blue float-right">2 float-right</div>
    <div class="box yellow float-left">3 float-left</div>
  </div>

</body>
</html>

Dopo, nel foglio di stile, al container non diamo nessuna dimensione in larghezza o altezza, ma assegniamo semplicemente un colore.

Scriviamo poi le due proprietà per i float e creiamo le proprietà per i box contenitori.

.container {
  background-color: lightgrey;
}

.float-left {
  float:left;
}

.float-right {
  float:right;
}

.box {
  width: 50px;
  height: 50px;
  text-align: center;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

Il risultato ottenuto sarà quello della figura sotto:

float e clear nei CSS

Quindi il container non assumerà la stessa altezza dei box che contiene, in quanto, come dicevamo, i float escono dal normale flusso del documento.

Come possiamo risolvere questo problema e far si che l’altezza del container segua quella dei box?

Float e overflow

Una possibile soluzione potrebbe essere quella di utilizzare la proprietà overflow con valore auto.

Quindi ad esempio si potrebbe aggiungere al container la seguente proprietà:

.container {
  background-color: lightgrey;
  overflow: auto;
}

Allo stesso modo potrei utilizzare:

overflow: hidden;

Ecco dunque il risultato ottenuto:

float e overflow

Uno svantaggio nell’utilizzare la seguente proprietà è dato dal fatto che si può utilizzare qualora si ha controllo del margin e del padding altrimenti si rischierebbe di visualizzare le barre di scorrimento.

Uso di float e clear

La proprietà clear consente di impostare dei valori left, right, both, initial ed inherit.

Quindi possiamo cancellare il float su un lato oppure su entrambi i lati.

Proviamo dunque ad inserire un div direttamente nel codice html dopo tutti i contenuti.

  <div class="container">
    <span>ciao da coding creativo</span>
    <div class="box red float-right">1  float-right</div>
    <div class="box blue float-right">2 float-right</div>
    <div class="box yellow float-left">3 float-left</div>
    <div class="clearfix"></div>
  </div>

E nel css aggiungiamo la seguente classe:

.clearfix {
  clear: both;
}

In questo modo l’elemento non può avere elementi flottanti affiancati né a destra né a sinistra.

Clear e pseudo-elementi

Una buona abitudine, utilizzata per la maggior parte dei lavori web, è quella di non creare un div direttamente nella pagina html, ma utilizzare gli pseudo-elementi.

Nel nostro caso ci sarà utile lo pseudo-elemento ::after, al fine di creare, dopo il contenuto dell’elemento, una regola che abbia la proprietà clear, come nell’esempio precedente.

Dunque nella pagina html scriviamo semplicemente:

  <div class="container">
    <span>ciao da coding creativo</span>
    <div class="box red float-right">1  float-right</div>
    <div class="box blue float-right">2 float-right</div>
    <div class="box yellow float-left">3 float-left</div>

  </div>

Nei CSS la nostra regola potrebbe diventare:

.container::after {
  clear: both;
}

Con after creiamo il contenuto, non dopo l’elemento container, ma dopo il contenuto di container.

Ma ciò non basta, dobbiamo dirgli di aggiungere del contenuto vuoto e di comportarsi ad esempio come una tabella.

.container::after {
  content: '';
  display: table;
  clear: both;
}

In alternativa potremmo anche utilizzare:

.container::after {
  content: '';
  display: block;
  clear: both;
}

Qualche tempo fa si aggiungeva anche la regola:

visibility: hidden;

perché i vecchi browser non supportavano il content vuoto.

In questa lezione abbiamo affrontato il problema del collasso dei margini di un contenitore che contiene degli elementi flottanti, quindi abbiamo utilizzando le proprietà float e clear.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive