Witam wszystkich, ostatnio przerabiałem materiał o float i jego zastosowaniu, podobno przy float, jeśli nie użyjemy clearfix, bądź innej metody czyszczącej floata - rodzic elementu nie widzi swojej wysokości. W swoim przykładzie użyłem floata, wysokość div.contact nadal jest widoczna, nie rozumiem dlaczego. Druga rzecz to po użyciu floata próbowałem wycentrować napis obok ikonki za pomocą: vertical align: middle, ale efekt bez zmian. Prosiłbym o sugestię w tym temacie.
https://jsfiddle.net/m2719jxo/
0
3
crav21 napisał(a):
ostatnio przerabiałem materiał o float i jego zastosowaniu ...
Obecnie float powinien służyć głównie do stylizacji obrazka wewnątrz tekstu, bo do wszystkich innych zastosowań powstały nowsze / lepsze alternatywy takie jak flexbox, lub grid, które nie sprawiają takich problemów jak float.
Jeśli mamy jakiś długi akapit i chcemy zrobić żeby tekst "zawijał się" na obrazku to możemy wykorzystać właśnie float.
<p style="width: 200px;">
<img style="float:left" src="https://4programmers.net/img/avatar.png" alt="...">
This is a paragraph with a floating image, no matter how many lines in this paragraph, the image will always be in the
proper place and no line of the paragraph has a terrible line height, looks great!
</p>
I wyjdzie nam taki efekt
crav21 napisał(a):
... podobno przy float, jeśli nie użyjemy clearfix, bądź innej metody czyszczącej floata - rodzic elementu nie widzi swojej wysokości. W swoim przykładzie użyłem floata, wysokość div.contact nadal jest widoczna, nie rozumiem dlaczego.
W swoim przykładzie na jsfiddle zrobiłeś coś takiego
.visit img {
float: left;
}
<div class="visit">
<div class="contact">
<img src="..." alt="...">
<span>[email protected]</span>
</div>
</div>
Dodałeś float: left jedynie na obrazek, więc <div class="contact"> bierze swoją wysokość ze znacznika <span> i obecnie divy mają po 18px wysokości zamiast normalnych 36px, bo takiego rozmiaru są obrazki.
crav21 napisał(a):
Druga rzecz to po użyciu floata próbowałem wycentrować napis obok ikonki za pomocą: vertical align: middle, ale efekt bez zmian. Prosiłbym o sugestię w tym temacie.
Proponuje poczytać o właściwościach związanych z flexboxem display: flex, który powinien uprościć stylizowanie takich elementów. Jeśli wyrzucimy float: left z Twojego kodu to zrobienie tego moim sposobem wyglądałoby tak
.contact {
display: flex;
align-items: center;
}
0
Super dziękuje, teraz się wszystko wyjaśniło, nie wiedziałem że jak istnieje drugi element w rodzicu(bez float) to rodzic pobiera jego wysokość. Co do flexa to pewnie przejdę do niego niebawem :)