Proprietatea CSS clear
Proprietatea clear stabilește ce se întâmplă cu elementul de lângă un element plutitor. Împiedică elementele să se așeze în jurul sau lângă conținutul plutitor.
Poate avea aceste valori: none, left, right, both, și inherit.
Exemplu
clear: left împinge al doilea div în jos, sub primul div plutitor.
Prompt
O pagină HTML care arată proprietatea clear.
Într-un bloc
<style> intern, faceți div1 să plutească la stânga (ca o casetă colorată) și dați div2 clear: left cu un chenar, astfel încât div2 să fie împins sub div1 plutitor în loc să stea lângă el. Adăugați ambele div-uri.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
float: left;
width: 100px;
height: 70px;
background-color: #4CAF50;
}
.div2 {
clear: left;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2 - Because clear: left is set, this div is pushed below the floated div1.</div>
</body>
</html>
Trucul CSS Clearfix
Dacă un element plutitor este mai înalt decât containerul său, acesta iese din container. Trucul clearfix rezolvă acest lucru.
Trucul clearfix folosește pseudo-elementul ::after pentru a face ca containerul părinte să încadreze corect copiii săi plutitori.
Exemplu
Clasa clearfix face ca containerul să încadreze copilul său plutitor înalt.
Prompt
O pagină HTML care folosește trucul clearfix astfel încât un container să încadreze copilul său plutitor înalt.
Într-un bloc
<style> intern, dați unui container un chenar, faceți să plutească o casetă înaltă în interiorul lui, și adăugați o regulă .clearfix::after cu content "", clear both, și display table. Aplicați clasa clearfix containerului astfel încât acesta să înfășoare corect copilul plutitor.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
border: 3px solid #4CAF50;
}
.box img {
float: right;
}
.imgbox {
float: right;
width: 100px;
height: 170px;
background-color: #4CAF50;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h3>With clearfix</h3>
<div class="box clearfix">
<div class="imgbox"></div>
Some text. The clearfix hack makes the green border enclose the tall floated box.
</div>
</body>
</html>
Proprietăți CSS
Un rezumat al proprietăților de aici:
clear— stabilește ce se întâmplă cu elementul de lângă un element plutitor.float— stabilește dacă și cum plutește un element.