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>
Loading...