123


Posizionamento con float in CSS. Cose difficili con parole semplici

Coi CSS puoi posizionare qualsiasi elemento sulla tua pagina in modo tuo! E oggi vediamo un caso particolare posizionare con aiuto della proprieta float di CSS Perche esistono anche altri  tipi di posizionamento nei CSS e ognuno di questi tipi ha il proprio uso. In questo tutorial esamineremo diverse situazioni  da creando layout multiuso e posizionamento unico di un elemento, a descrivere diversi metodi di come farlo.

Posizionare elementi con aiuto di proprieta float in CSS

Uno dei modi per posizionare gli elementi in una pagina web  è di usare la proprietà float. Questa proprietà è abbastanza universale e può essere applicata in diversi modi. In sostanza, la proprietà float prende un elemento, lo rimuove dal normale flusso di elementi nel DOM  della pagina e lo posiziona a sinistra o a destra dell'elemento padre. Tutti gli altri elementi della pagina scorreranno sui lati liberi di tale elemento. Ad esempio un  paragrafo  risalirà e scorrerà sul lato liber del elemento   <img> per esempio, se per  <img> è impostata la proprietà float.

Quando la proprietà float viene applicata a più elementi contemporaneamente, questo consente di creare un layout con elementi  situati l'uno accanto all'altro, come mostrato nel layout a più colonne. La proprietà float puo assumere diversi valori  i due più popolari sono left e right,  che consentono ad elemento di essere posizionato a sinistra o a destra del suo genitore.
Come si scrive:

img {
  float: left;
}

Float in pratica

Creiamo un layout comune di una pagina  con un'intestazione in alto, due colonne al centro e un blocco in basso. Idealmente, questa pagina dovrebbe essere creata usando gli elementi <header>, <section>, <aside> e <footer>  all'interno dell'elemento <body> markup l'HTML potrebbe apparire cosi:

<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>

 

Dimostrazione del loyuat

 

<header>
<section>
<footer>

Qui, gli elementi <section> e <aside> sono elementi block  quindi vengono posizionati uno sopra l'altro per impostazione predefinita. Tuttavia, noi vogliamo che questi elementi si trovino fianco a fianco. Impostando float per <section> come left, e per <aside> come right, possiamo posizionarli in due colonne l'uno al finaco del altro. Il nostri stili  CSS saranno cosi :

section {
  float: left;
}
aside {
  float: right;
}

Per riferimento, gli elementi flottanti vengono posizionati  lungo il bordo dell'elemento padre. Se non v'è nessun genitore, allora elemento con la proprietà float  sarà situato sul bordo della pagina. Quando creiamo un elemento flottante, esso vine rimosso dal normale flusso del documento HTML. Questo porta al fatto che la larghezza dell'elemento cambia e la sua larghezza diventa uguale alla larghezza del suo contenuto.

A volte, ad esempio quando si crea una bozza della pagina che sara riutilizzata tante volte nel futuro, questo comportamento è indesiderabile. Questo può essere corretto aggiungendo width con un valore fisso per ogni colonna. A parte questo per evitare che elelmenti flottanti si tocchino essendo posizionati uno a fianco all'altro, possiamo utilizzare la proprietà margin per impostare lo spazio libero tra gli elementi.

Qui sotto vediamo di allargare i blocchi precedenti  aggiungendo ad esso la larghezza e  margin per ogni colonna per formattare  meglio il nostro risultato desiderato.

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

Vediamo il risultato

<header>
<section>
<footer>

Proprieta float può cambiare il valore display  di un elemento

 

Per un elemento flotante, è  importante di capire che questo elemento viene rimosso dal normale flusso sulla pagine e che applicazione della proprietà float può cambiare la sua proprietà display . Il funzionamento della proprietà float si basa sul fatto che per  un elemento è impostata valore  display:block come valore predefinito anche se non è indicato in chiaro e quindi esso occupa tutta la riga intera sulla pagina web e non permette ad altri elementi risalire nella stessa riga

Un altra situazione, un elemento il cui display è specificato come inline, come per esempio un <span> ignora qualsiasi proprietà di altezza o larghezza. Tuttavia, se si specifica float per un elemento del genere il suo comportamento cambierà e il suo valore display diventera block, e come conseguenza potrà gia assumere  valori di una certa larghezza e altezza. Quindi applicando proprietà float ad un elemento dobbiamo sempre controllare come questo  influisce sul suo valore della proprietà display.

Scopri di piu gaurdando anche il nostro videotutorial

video

 

Per due colonne per metterli al fianco e sulla stessa riga posiamo usare proprieta  float , per una colonna come left  e per altra come right,  ma per fare la stessa cosa per diverse colonne dovremo cambiare il nostro approccio. Ad esempio, vorremmo ottenere una riga con tre colonne tra i nostri elementi <header> e <footer>. Se scartiamo il nostro elemento <aside> e usiamo i tre elementi <section>, il nostro markup html  sara cosi :

 

<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

 

Per posizionare questi tre elementi <section> in una fila di tre colonne, dobbiamo impostare float per tutti gli elementi <section> come left.  Inoltre dobbiamo regolare la larghezza della <section> tenendo in considerazione  anche altre colone presenti (che lo spazio in disposizione sara sufficiente per distribuzione di colonne con i nostri valori di larghezza indicati  )

section {
  float: left;
  margin: 0 1.5%;
  width: 30%;
}

Qui sotto abbiamo tre colonne, tutte con lo stesso valore di larghezza e margin e anche con  float impostato a  left.

 

<header>
<section>
float: left; width: 30%;
<section>
float: left; width: 30%;
<section>
float: left; width: 30%;
<footer>

 

Particolarità della proprietà float

 La proprietà float è stata inizialmente progettata per consentire al contenuto di risalire al fianco di una immagine. Per una immagine è possibile specificare proprietà  float e  il contenuto sottostante risalirà e occuperà lo spazio opposto rispetto valore indicato per float  Anche se questo funziona perfettamente per le immagini, la proprietà float non era inizialmente pensata per l'uso nel layout e per scopi di posizionamento e quindi possiede diverse trappole.

Una di queste trappole è che a volte gli stili applicati ad elemento flottante non vengono rispettati . Quando un elemento  diventa flottante , allora  viene rimosso dal normale flusso delle pagina  e di conseguenza gli stili di elementi attorno a questo elemento flottante possono essere influenzati negativamente. Spesso i valori delle proprietà margin e padding sono interpretati in modo errato, causandone l'unione con l'elemento che lo affianca.

Un altro trappola è che il contenuto sottostante cerca di occupare tutto lo spazio libero che si e creato al fianco del elemento flottante che in certi occasioni non e  indesiderato.

Nel precedente esempio a due colonne, dopo aver aggiunto proprietà  float agli elementi <section> e <aside>, ma prima che indichiamo width   l'elemento <footer> si ritroverà  tra i due elementi flottanti sopra di esso, riempiendo tutto lo spazio disponibile. Cio è  l'elemento <footer> si sposta  nello spazio libero tra gli elementi <section> e <aside>, riempendo lo spazio libero che si e creato.

 

<header>
<section>
float: left; nessuna larghezza indicata
<footer>

 

Per impedire una situazioni del genere dobbiamo creare una specia di barriera  e riportare ordine nel flusso degli elementi sulla pagina. Vediamo come creare questa barriera e cancellare diciamo funzionamento della proprietà  float sulla pagina.

Creare una barriera dopo elementi flottanti

Aria di funzionamento della proprietà float viene cancellata tramite la proprietà clear, che puo assumere diversi valori: i valori più comunemente usati sono left, right e both.

div {
  clear: left;
}

 

Il valore left cancella float sulla sinistra, mentre il valore right cancella sulla destra. Il valore both  tuttavia, cancella effetto di  float sulla destra e sulla sinistra ed è spesso l'opzione più ideale. Tornando al nostro esempio precedente, se usiamo la proprietà clear con both per l'elemento <footer>, possiamo cancellare effetto di  float. È importante che la pulizia della riga  sia applicata all'elemento specificato (di solito viene creato un div senza contenuto che svolge funzione di una barriera per elementi sottostanti ) dopo gli elementi flottanti  e non prima per riportare la pagina al suo normale flusso.

 

footer {
  clear: both;
}

 

Dimostrazione di un layout basato sul float e con utilizzo di  clear:both

 

<header>
<section>
float: left; width: 63%;
<footer>
clear: both;

Il contenuto del elemento flottante

 

Invece di ripulire effetto del  float, un'altra opzione è quella di impostare il contenuto come clear. Il risultato sarà quasi lo stesso, ma in questo caso si garantisce veramente che tutti i nostri stili prescritti  verranno visualizzati in modo appropriato. Per usare questo metodo, gli elementi flottanti con la proprietà float devono trovarsi all'interno dell'elemento genitore, che sara da contenitore, asicurando il flusso del DOM oltre i suoi bordi completamente normale. Vediamo di usare una classe che  chiameremo gruppo per darli un significato abbastanza chiaro e  al suo  interno  raggruppiamo i nostri elementi flottanti.

.group::before,
.group::after {
  content: "";
  display: table;
}
.group::after {
  clear: both;
}
.group {
  clear: both;
  
}

 

Vediamo un puo di capire cosa significa ogni riga del codice scritto. In sostanza applicando alla nostra classe group clear:both abbiamo impedito ai elementi successivi di risalire e occupare lo spazio libero al fianco dei elementi flottanti   

In particolare, gli pseudo-elementi :: before e :: after, come descritto qui, generano dinamicamente gli elementi sopra e sotto elemento con la classe group. Questi elementi non includono alcun contenuto ( indicato come  content: "";) e vengono visualizzati come elementi della tabella ( display: table;), e quindi sono elementi di blocco. Elemento generato dinamicamente (con la pseudoclasse :after ) dopo l'elemento con la classe group cancella il float all'interno del contenitore con la classe group, proprio come il clear in precedenza.

Infine,  elemento con la classe group e con la sua proprietà clear:both  cancella qualsiasi altri  inconvenienze legati alla proprietà  float che potrebbero aver luogo prima di esso per esempio elementi con float right e left separati . Vediamo che c'è più codice qui rispetto piu chiaro e corto  clear: both   ma può essere molto utile.

Applicando il concetto appena descritto al nostro layout di pagina a due colonne, posiamo  racchiudere <section> e <aside>  in un elemento genitore. Questo elemento padre conterrà e gestira gli elementi flottanti . E il nostro codice  sarà simile a questo:

 

HTML
<header>...</header>
<div class="group">
  <section>...</section>
  <aside>...</aside>
</div>
<footer>...</footer>
CSS
.group::before,
.group::after {
  content: "";
  display: table;
}
.group::after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

 

<header>
<section="group">
<section>
float: left;
<footer>
clear: both;

 

La tecnica mostrata qui è nota come "clearfix" e la puoi trova spesso su altri siti con il nome della classe clearfix,  clr o cf. Nel nostro esempio abbiamo deciso di utilizzare il nome della classe group perché rappresenta un gruppo di elementi ed esprime meglio il concetto.

 Quando per gli elementi si utilizza la proprieta  float è importante di tenere conto di come essi influenzano sul flusso di elementi della pagina e assicurarsi che il flusso della pagina venga ripristinato o inserendo semplicemente un elemento vuoto come clear: both;o attraverso il blocco contenitore sempre con la stessa proprietà la interno. Altrimenti ricerche dei elementi flottanti o le cause della rottura del disegno della vostra pagina potrebbe far venire parechio mal di testa specialmente su pagine con contenenti a più righe, ciascuna con diverse colonne.

E come conclusione ti riporto un  frammento del codice di un fail di CMS Joomla che visualizza  articolo in K2

<?php if($this->item->params->get('itemRating')): ?>
    <!-- Item Rating -->
    <div class="itemRatingBlock">
        <span><?php echo JText::_('K2_RATE_THIS_ITEM'); ?></span>
        <div class="itemRatingForm">
            <ul class="itemRatingList">
                <li class="itemCurrentRating" id="itemCurrentRating<?php echo $this->item->id; ?>" style="width:<?php echo $this->item->votingPercentage; ?>%;"></li>
                <li><a href="#" data-id="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_1_STAR_OUT_OF_5'); ?>" class="one-star">1</a></li>
                <li><a href="#" data-id="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_2_STARS_OUT_OF_5'); ?>" class="two-stars">2</a></li>
                <li><a href="#" data-id="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_3_STARS_OUT_OF_5'); ?>" class="three-stars">3</a></li>
                <li><a href="#" data-id="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_4_STARS_OUT_OF_5'); ?>" class="four-stars">4</a></li>
                <li><a href="#" data-id="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_5_STARS_OUT_OF_5'); ?>" class="five-stars">5</a></li>
            </ul>
            <div id="itemRatingLog<?php echo $this->item->id; ?>" class="itemRatingLog"><?php echo $this->item->numOfvotes; ?></div>
            <div class="clr"></div>
        </div>
        <div class="clr"></div>
    </div>
    <?php endif; ?>

In questo frammento quello che ci interessa e la terzultima riga dove abbiamo un <div class="clr"></div> che serve proprio per ripulire effetto dei elementi flottanti e ristabilire il flusso normale di elementi in seguito. Chi utilizza K2 di Joomla potra capire che questo framento si riferisce ad aseniazione del raitig con le stelette ad un articolo.

.

 
Letto 196 volte

Potrebbe interessarti

Altro in questa categoria: « Menu artistico di un sito web moderno
Torna in alto