Dlaczego jeśli nie podam argumentu float:left dla diva to posiada on zerową wysokość pomimo że ma w sobie elementy?
dodanie float:left niszczy ten problem ale sie zastanawiam dlaczego tak jest
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
a{
text-decoration: none;
padding: 12px;
float: left;
}
</style>
<body>
<div style="float:left"> <!-- <div> -->
<a href="">Gallery</a>
<a href="">About</a>
</div>
</body>
</html>
W skrócie, bez szukania w dokumentacji: ponieważ idea floatów polega na tym, że element ustawiony jako float (==pływający) jest usunięty z normalnego ustawienia układu elementów na stronie. Co to oznacza? Jeśli ustawisz, jak w przykładzie, całą zawartość elementu <div> jako float, to ten element myśli, że nic w nim nie ma – bo float usuwa wszystkie <a> z miejsca, gdzie <div> je jakby "oczekuje".
Napisz, jeśli chciałbyś poparcie dokumentacji. To zawsze zabiera trochę czasu, więc gdy nie muszę, nie szukam.
UPDATE: A że w efekcie w elemencie <div> nic nie zostaje, to pusty <div> == <div> z zerową wysokością.
UPDATE 2: Jeszcze kwestia, dlaczego taki sam float ustawiony dla elementu <div> i jego zawartości rozwiązuje sprawę. Chodzi o to, że wtedy <div> jest jakby przesunięty do tego samego układu elementów, co jego zawartość. Spróbuj dać dla elementu <div> wartość float: right, dla jednego <a> też wartość float: right, a dla drugiego float: left, lub jakoś podobnie, i zobacz efekty.
bo "a" masz na float:left, jakbyś dodał za nimi tak jak się powinno robić element clear:both to wszystko bedzie miało odpowiednią wysokość
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
a{
text-decoration: none;
padding: 12px;
float: left;
}
a:after{
clear: both;
conternt: "";
display: block;
}
</style>
<body>
<div> <!-- <div> -->
<a href="">Gallery</a>
<a href="">About</a>
</div>
</body>
</html>
no właśnie nie ma u góry dałem czyszczenie
a co do update2 to zmieniłem jedno na right a dugie na left nie widze różnicy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
a{
text-decoration: none;
padding: 12px;
// float: left;
}
a:after{
clear: both;
conternt: "";
display: block;
}
</style>
<body>
<div style="float:right;"> <!-- <div> -->
<a style="float: left;"href="">Gallery</a>
<a style="float:right;" href="">About</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
a{
text-decoration: none;
padding: 12px;
float: left;
}
.clear {
clear: both;
}
</style>
<body>
<div> <!-- <div> -->
<a href="">Gallery</a>
<a href="">About</a>
<div class="clear"></div>
</div>
</body>
</html>
no właśnie nie ma u góry
Czego nie ma u góry?
dałem czyszczenie
Nie dałeś. :after (lub ::after, z podwójnym dwukropkiem – zależnie od przeglądarki) tworzy nowy pseudoelement, a nie pobiera istniejący. Zobacz: https://www.w3schools.com/cssref/sel_after.asp oraz https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_after_style
a co do update2 to zmieniłem jedno na right a dugie na left nie widze różnicy
#container ma float: right, a jest bez float -> #container wraz z a pływają do prawej; padding nie jest uwzględniany w treści dookoła a (#container ma wysokość linii tekstu).
https://jsfiddle.net/omz22azb/
#container ma float: left, a jest bez float -> #container wraz z a pływają do lewej; padding nie jest uwzględniany w treści dookoła a (#container ma wysokość linii tekstu).
https://jsfiddle.net/sfx0u3bz/
#container ma float: left, oba a mają też ten sam float: left -> #container wraz z a pływają do lewej; padding jest uwzględniany w treści dookoła a (#container urósł do wysokość swojej zawartości, tj. do wysokości elementów a).
https://jsfiddle.net/v0n28enp/
#container jest bez float, oba a mają ten sam float: right -> #container nie pływa, ma zerową wysokość; oba a pływają do prawej; padding jest uwzględniany w treści dookoła a.
https://jsfiddle.net/1874wsev/
#container jest bez float, pierwszy element a ma float: left, a drugi float: right -> #container nie pływa, ma zerową wysokość; pierwszy element a pływa do lewej, a drugi do prawej.
https://jsfiddle.net/y6j2c9qk/
#container jest bez float, pierwszy element a ma float: right, a drugi float: left -> #container nie pływa, ma zerową wysokość; pierwszy element a pływa do prawej, a drugi do lewej.
https://jsfiddle.net/g6upsfhL/
Mam nadzieję, że żadnych błędów nie porobiłem.
UPDATE: poprawiłem treść dwóch ostatnich punktów.