czwartek, 2021-02-11

Technika clearfix

Jedną z metod często stosowanych w powiązaniu z elementami pływającymi jest tzw. technika clearfix.

Przykład 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore veniam illum, ut.

Kod HTML

<div class="clear-ex">
	<div></div>
	<div></div>
</div>
<p>Lorem...</p>

Kod CSS

Pobocznym efektem zastosowania własności float stało się niezgodne z oczekiwaniem przesunięcie akapitu, który znalazł się z lewej strony poprzedzającego elementu blokowego.

.clear-ex div {
  	width:120px; 
  	height: 120px; 
  	background: #567; 
  	float: left; 
  	margin-left: 10px;
  }

Przykład 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore veniam illum, ut.

Kod HTML

Jednym z wariantów techniki clearfix jest zastosowanie nadmiarowego elementu następującego po elementach pływających i nadanie mu odpowiednich własności CSS. W prezentowanym przypadku jest to znacznik <br> z klasą clr. Posłużenie się nazwą klasy jest korzystne, ponieważ małym nakładem pracy można to rozwiązanie stosować w wielu miejscach na kilku stronach, wystarczy dla jakiegoś dopisać odpowiednią nazwę klasy (tutaj jest to clr).

<div class="clear-ex">
	<div></div>
	<div></div>
	<br class="clr">
</div>
<p>Lorem...</p>

Kod CSS

Element, który zniweluje zasięg własności float powinien być blokowy (display: block). Właściwość clear określa, czy dany element będzie honorował wartość float poprzedzających znaczników. Dodatkowo znacznik <br> w niektórych przeglądarkach spowoduje wyświetlenie dodatkowego pustego wiersza, dlatego zastosowano także własności font-size oraz height ustawione na zero.

.clear-ex div {
  	width:120px; 
  	height: 120px; 
  	background: #567; 
  	float: left; 
  	margin-left: 10px;
  }
  .clr { 
  	display: block; 
  	clear: both;
  	font-size: 0;
  	height: 0;
  }

Przykład 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore veniam illum, ut.

Kod HTML

Drugi sposób zniwelowania problemu z własnością float jest bardziej kompleksowy i nie wymaga nadmiarowych znaczników. Do kontenera z elementami pływającymi dodano dodatkową klasę o nazwie clearfix.

<div class="clear-ex clearfix">
	<div></div>
	<div></div>
</div>
<p>Lorem...</p>

Kod CSS

Podwójny dwukropek w selektorze CSS oznacza pseudoklasę, zapis .clearfix::after oznacza, że na końcu elementu z klasą clearfix zostanie wstawiony dodatkowy element o zadeklarowanych własnościach. Działanie display: block oraz clear: both zaprezentowano w poprzednim przykładzie, dodatkowy element powinien także coś zawierać (content: " "). We współczesnych przeglądarkach może to być wartość pusta (content: ""), jednak ze względu na niektóre starsze programy, zastosowano spację. Klasa o nazwie clearfix o własnościach zaprezentowanych w przykładzie stała się niepisanym standardem wśród twórców stron internetowych.

.clear-ex div {
  	width:120px; 
  	height: 120px; 
  	background: #567; 
  	float: left; 
  	margin-left: 10px;
  }
  .clearfix::after {
  	display: block;
  	content: " ";
  	clear: both;
  }