float proprietate specifică dacă este sau nu un element ar trebui să plutească.
clear Proprietatea este utilizată pentru a controla comportamentul elementelor flotante.
Proprietatea float
În utilizarea sa cea mai simplă, float proprietatea poate fi utilizată pentru a încadra textul în jurul valorii de imagini.
Următorul exemplu specifică faptul că o imagine trebuie să plutească spre dreapta într-un text:
clear proprietate
clear Proprietatea este utilizată pentru a controla comportamentul elementelor flotante.
Sfâräitul un element plutitor va curge în jurul ei. Pentru a evita acest lucru, utilizați clear proprietatea.
clear proprietate specifică pe care părți ale unui element de elemente flotante nu au voie să plutească:
clearfix Hack - overflow: auto;
În cazul în care un element este mai înalt decât elementul care îl conține, și este plutea, se va revărsa în afara recipientului acestuia.
Apoi , putem adăuga overflow: auto; la elementul care conține pentru a rezolva această problemă:
Web Layout Exemplu
Este comun de a face machete întregi de web folosind float proprietate:
Exemplu
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Încearcă - l singur » 
Mai multe exemple
O imagine cu chenar și margini care plutește spre dreapta într - un paragraf
Lăsați un float de imagine la dreapta într-un paragraf. Adăugați la frontieră și marjele la imagine.
O imagine cu o legendă care plutește spre dreapta
Să o imagine cu un flotor legendă la dreapta.
Să prima literă a unui paragraf float la stânga
Să prima literă a unui paragraf float la stânga și stilul scrisorii.
Crearea unui meniu orizontal
Utilizați float cu o listă de hyperlink-uri pentru a crea un meniu orizontal.
Crearea unei pagini de pornire fără tabele
Utilizați float pentru a crea o pagina cu un antet, subsol, conținut de la stânga și la conținutul principal.
Toate proprietățile CSS Float
| Proprietate | Descriere |
|---|---|
| clear | Specifică pe care laturile unui element în care elementele flotante nu au voie să plutească |
| float | Specifică dacă este sau nu un element ar trebui să plutească |
| overflow | Specifică ce se întâmplă în cazul în care conținutul debordează caseta unui element |
| overflow-x | Specifică ce să facă cu stânga marginile / dreapta ale conținutului în cazul în care deversează zona conținutului elementului |
| overflow-y | Specifică ce să facă cu marginile de sus / jos ale conținutului în cazul în care deversează zona conținutului elementului |