Float i fixed razem

0

Chodzi o to że jeśli usunę float: left; dla parametru a to te elemnty nie dopasują się do elemntu fixed, natomiast jeżeli użyję float:left to się dopasują, co to ma wspólnego, czy fixed i left działają na tej samej 'wysokości' ? dlaczego jeśli dam float right to elementy zamienią się miejscami?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<style>
#logo{
    color: #0086b3;
    margin: 8px 20px;
    font-size: 140%;
    float: left;
}
.menu_links{
    float: left;
}

a{
    color: white;
    text-decoration: none;
    padding: 18px;
	border: 1px solid red;
	float: left; /* tutaj ########### */
}
#menu{
    background-color: #262626;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}


</style>
<body>
    
<div id="menu">
    <div id="logo">Bartuś</div>
    <div class="menu_links">
        <a href="">Home</a>
        <a href="">Gallery</a>
        <a href="">About</a>
    </div>
</div>

<body>
</html>

1

Nie parametru a, tylko:

  1. znacznika <a> lub </a> (ang. tag) – jeśli masz na myśli tylko <a> lub tylko </a> (https://developer.mozilla.org/en-US/docs/Glossary/Tag);
  2. elementu <a> (ang. element) – jeśli masz na myśli element HTML <a>linkNieWiadomoDoCzego</a> (znacznik otwierający, treść, znacznik zamykający; https://developer.mozilla.org/en-US/docs/Glossary/Element);
  3. węzła <a> (ang. node), jeśli masz na myśli węzeł <a>linkNieWiadomoDoCzego</a> w modelu DOM (https://developer.mozilla.org/pl/docs/DOM oraz https://developer.mozilla.org/en-US/docs/Glossary/Node/DOM).

A dlaczego elementy <a> nie dopasowują się do elementu, który ma position: fixed?

Najpierw zakomentuj wszystkie display: float; i zobacz, jak będzie to wyglądać. Elementy <a> "wchodzą" teraz na element <div id="logo">. Właściwie "wchodzi" ich padding – dlaczego? Ponieważ elementy <a> są elementami śródliniowymi (===mają display: inline), więc dodanie im padding nic nie zmienia w ich położeniu – nadal są umieszczone w tej samej jednej linii i w tej samej wysokości od poprzedniej linii (w której jest element z id="logo"). Przy okazji: na wysokość linii może wpłynąć m.in. wartość parametru własności line-height, ale to teraz nieważne.

Nie chcemy jednak, żeby te elementy były tak umieszczone – chcemy, by były w jednej linii razem z logo. Dajmy więc elementom <a> wartość float: left;. Hm, ciekawa sprawa – nadal są pod logo, ale teraz już nie wchodzą na nie! Dlaczego? Ponieważ po dodaniu float: left; zostały "wyjęte" z normalnego układu elementów na stronie, dzięki czemu wszystkie inne elementy opływają je po prawej stronie. Ale które wszystkie? Ano, u nas jeden: <div class="menu_links">. Spróbuj zrobić zresztą tak:

<div class="menu_links">
    <a href="">Home</a>b
    <a href="">Gallery</a>c
    <a href="">About</a>d
</div>e

Zobaczysz, że litery "b", "c" oraz "d" są umieszczone za wszystkimi elementami <a>, ponieważ poleciał tam <div>, który je opakowuje (to, że opakowuje także elementy <a>, nie ma znaczenia przy floatach). Ale litera "e" nie jest z nimi w jednej linii – znajduje się już za tym elementem <div>, więc siedzi pod nim (bo tak działają elementy blokowe, <div> jest domyślnie elementem blokowym). I zarówno <div>, jak i litera "e" opływają wszystkie elementy <a>.

No dobrze, ale nadal chcemy mieć te linki w jednej linii z logo. Spróbujmy więc dodać float: left; do elementu <div id="logo"> (już bez tych liter "b", "c", "d" i "e"). Co się dzieje? No nareszcie ładnie to wygląda, wszystko w jednej linii. :)

Ale... zaraz, zaraz! Czyżby element <div class="menu_links"> nie potrzebował ustawienia własności float? Zobaczymy, jak on w ogóle wygląda: dajmy mu kolor background-color: yellow;. I... nic. Pusto! Gdzież on jest? Ano, nie została dla niego ustawiona własność float, więc myśli, że nie ma w nim żadnej treści, czyli żadnego elementu <a> (on jest w zwykłym układzie elementów, a floaty są w swoim). I ma zerową wysokość... (możesz dodać mu jakąś wysokość, np. height: 100px;, żeby zobaczyć, że nie został wciągnięty przez czarną dziurę i że nadal zawiera elementy <a>). A jakbyśmy i jego spróbowali wcisnąć do tego układu floatów? Nadajmy mu tę samą wartość float: left;... Voila! Linki są żółte, tak jak ten element (bo same nie mają żadnego tła). I nic z tego żółtego koloru nie wychodzi poza obręb czerwonych ramek – co oznacza, że <div class="menu_links"> ładnie opakowuje nam teraz wszystkie elementy <a>.

Ale bądźmy wredni. Odechciało nam się, żeby elementy <a> były float. Niech wszystkie inne będą, które ustawiliśmy, ale nie <a>. Usuńmy więc im własność float... i co? Podniosły się do góry! Dlaczego? Ponieważ usuwając je z układu float, przywróciliśmy je do zwykłego układu elementów na stronie. A przeglądarka uznała, że elementy te będąc w zwykłym układzie mają opływać wszystkie możliwe elementy float na stronie (bo tak zawsze działa float). Możliwe, czyli te, które mają jakąkolwiek zawartość – u nas tylko <div id="logo">. A więc u nas opływają sobie napis "Bartuś", a dokładnie cały element <div id="logo"> (czyli element z zawartością tekstową). Jeszcze jednak sprawa: co z żółtym tłem, że się skurczyło? Ano, elementy <a> nadal są śródliniowe, więc teraz element <div>, który je zawiera, sięga swoimi granicami tylko do wysokości linii (line-height).

Mam nadzieję, że z powyższego jakoś wynika, że wartość position: fixed; nie ma tutaj związku z wartością float: left;. :)

Jakby coś było niejasne, pytaj.


UPDATE: Powiem szczerze, w tym, co napisałem wyżej, jedna rzecz jest dla mnie niejasna: dlaczego przy ustawionej własności float padding jest liczony, a przy nieustawionej nie jest. Jeśli nie zapomnę, poszukam w wolnym czasie.


UPDATE 2: Na razie znalazłem jedynie potwierdzenie tego zachowania na przykładzie: http://maxdesign.com.au/articles/inline/


UPDATE 3: Chyba mam wyjaśnienie. Nie jest najlepsze, ale... https://teamtreehouse.com/community/why-does-margin-top-and-bottom-does-not-effect-inline-element Chodzi o to, że padding elementów śródliniowych nie ma wpływu na treść dookoła nich dlatego, że nie może mieć – inaczej rozbijałoby to przepływ treści ("flow of content"). Jednak jeśli te elementy są już float, to już nie ma czego rozbić – ponieważ i tak są w innym układzie (w innym flow), niż elementy nie-float, niż układ zwykły – i dlatego można uznać, że ich padding wpływa na treść dookoła. Tak przynajmniej zrozumiałem z odpowiedzi na stronie, do której prowadzi podany link.


UPDATE 4: No! Nie pomyl flow oraz float! ;)


UPDATE 5: Tu jeszcze ciekawa lektura: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model


UPDATE 6: Poprawiłem "parametru" na "własności".

0

no coś tm zrozumiałem, dzięki za odpowiedż :0

1 użytkowników online, w tym zalogowanych: 0, gości: 1