Zerowy height

0

Dlaczego jeśli nie podam argumentu float:left dla diva to posiada on zerową wysokość pomimo że ma w sobie elementy?
1.jpg
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>
1

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.

1

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ść

0 
<!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>
1 

<!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>
1

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

  1. #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/

  2. #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/

  3. #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/

  4. #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/

  5. #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/

  6. #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.

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