Proprietatea CSS float
Proprietatea float stabilește modul în care un element plutește în interiorul containerului său. Plasează elementul în partea stângă sau dreaptă, permițând textului și elementelor inline să se înfășoare în jurul lui.
Poate lua aceste valori:
left— elementul plutește în stânga containerului său.right— elementul plutește în dreapta containerului său.none— valoarea implicită. Elementul nu plutește și rămâne acolo unde apare în text.inherit— elementul preia valoarea float a părintelui său.
Sfat: Proprietatea float este adesea folosită pentru a înfășura textul în jurul imaginilor.
Exemplu CSS float: right
float: right face ca un element să plutească în dreapta containerului său.
Sfat: Micșorați fereastra pentru a vedea cum textul se înfășoară în jurul elementului plutitor.
Exemplu
Caseta plutește în dreapta, iar textul se înfășoară pe partea sa stângă.
<style> intern, faceți să plutească la dreapta o casetă colorată (înlocuitor pentru o imagine) cu un margin stânga. Adăugați un paragraf de text care se așează în jurul părții din stânga.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: right;
width: 170px;
height: 170px;
background-color: #4CAF50;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. The box floats to the right and the text wraps around it. Make the window smaller to see the wrapping change.</p>
</body>
</html>
Exemplu CSS float: left
float: left face ca un element să plutească în stânga containerului său.
Exemplu
Caseta plutește în stânga, iar textul se înfășoară pe partea sa dreaptă.
<style> intern, faceți să plutească la stânga o casetă colorată (înlocuitor pentru o imagine) cu un margin dreapta. Adăugați un paragraf de text care se așează în jurul părții din dreapta.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: left;
width: 170px;
height: 170px;
background-color: #4CAF50;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. The box floats to the left and the text wraps around it. Make the window smaller to see the wrapping change.</p>
</body>
</html>
Exemplu CSS float: none
float: none înseamnă că elementul nu plutește și rămâne în fluxul normal.
Exemplu
Caseta rămâne în fluxul normal, iar textul nu se înfășoară în jurul ei.
<style> intern, setați o casetă colorată (înlocuitor pentru o imagine) la float none. Adăugați un paragraf; textul nu se așează în jurul casetei.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: none;
width: 170px;
height: 170px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. With float: none the box stays in the normal flow and the text does not wrap around it.</p>
</body>
</html>
Elemente CSS Float unul lângă altul
Plutirea mai multor elemente la stânga le face să se alinieze unul lângă altul.
Exemplu
Trei div-uri colorate sunt plutite la stânga astfel încât să stea unul lângă altul.
<style> intern, faceți să plutească la stânga elementele div cu padding de 15px, și dați lui .div1 un fundal roșu, .div2 galben, iar .div3 verde. Adăugați trei div-uri astfel încât să stea unul lângă altul.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>