Latest web development tutorials

CSS Float (mobile)

Qual è Float CSS (float)?



La Float CSS (galleggiante), l'elemento si sposta verso sinistra o destra, saranno riorganizzati gli elementi che lo circondano.

Float (flottante), è spesso usato per le immagini, ma è molto utile quando lo stesso layout.


Come elemento flottante

elemento galleggiante orizzontale, significa che l'elemento non può che muoversi a destra ea sinistra e non può muoversi su e giù.

Un elemento flottante cercherà di spostare a sinistra oa destra fino a quando il bordo esterno attraverso il confine o in un altro contenitore galleggiante contenente scatola finora.

Elementi dopo l'elemento flottante si concentreranno su di esso.

Elementi prima l'elemento flottante non saranno interessati.

Se l'immagine è flottante destra, il testo seguente scorrerà intorno al lato sinistro di essa:

Esempi

img
{
float:right;
}

Prova »


elementi adiacenti l'uno all'altro Floating

Se si mette un paio di elementi galleggianti messi insieme, se c'è spazio, sarà uno accanto all'altro.

Qui, usiamo la pinacoteca proprietà float:

Esempi

.thumbnail
{
float: left;
width: 110px;
height: 90px;
margin: 5px;
}

Prova »


Float chiaro - Uso chiaro

Dopo gli elementi galleggianti intorno elementi riarrangiati, al fine di evitare questo, utilizzare la proprietà chiaro.

attributo clear specifica l'elemento non può apparire su entrambi i lati dell'elemento galleggiante.

Utilizzare proprietà di testo chiaro per aggiungere una galleria di immagini:

Esempi

.text_line
{
clear:both;
}

Prova »


Esempi

Altri esempi

L'immagine a sinistra aggiungere bordi e margini e carri al paragrafo

Aggiungiamo bordi dell'immagine e dei margini e il paragrafo galleggiante a sinistra

Titolo e immagini per il galleggiante destra

Lasciate che il titolo e le immagini per il galleggiante destra.

Lasciate che la prima lettera di un paragrafo galleggiante a sinistra

Modificare lo stile di modo che la prima lettera di un paragrafo galleggiante verso sinistra.

Non crea una pagina con una tabella

Utilizzare galleggiante per creare un'intestazione di pagina, piè di pagina, il contenuto a sinistra e il contenuto principale.


Tutte le proprietà float CSS

colonna "CSS" indica il numero di diverse versioni di CSS (CSS1 o CSS2) definisce la proprietà.

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1