Clearfix

6 772 0
Sprawdź najnowszą wersję komponentu clearfix zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Stosowanie właściwości float może powodować problemy z poprawnym wyświetlaniem elementów, które ją posiadają. Przykładowo poniżej mamy tekst oraz obrazek, zamknięte w divie z tłem. Jednak z powodu zastosowania float „wyszły” one z tego diva, przez co ma on zerową wysokość i się nie wyświetla. Dodatkowo psuje to ramkę przykładu.

Przykład

Tekst z floatem do lewej

Kod


<div class="bg-info">
  <p class="lead float-left">Tekst z floatem do lewej</p>
  <img src="https://placehold.it/100" class="img-fluid float-right">
</div>

Rozwiązaniem tej sytuacji jest zastosowanie tzw „clearfix”. W Bootstrapie jest on już zaimplementowany i wystarczy divovi wokół floatowanych elementów dodać klasę .clearfix.
Poniżej poprawne wyświetlanie powyższego kodu.

Przykład

Tekst z floatem do lewej

Kod


<div class="bg-info clearfix">
  <p class="lead float-left">Tekst z floatem do lewej</p>
  <img src="https://placehold.it/100" class="img-fluid float-right">
</div>

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (10 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*