Witam, to mój 1-y wpis.
Znalazłem się tutaj zwabiony genialnymi tutorialami i podcastami Mirosława Zalenta. Robiąc zadanie z 2 tutoriala HTML autorstwa MZ odkryłem bardzo dziwną rzecz. Poniżej divów z atrybutami float:left divy znajdujące się poniżej układają się prawidłowo mimo braku zastosowania w 1-ym divie atrybutu clear:both. W swoim kodzie wykomentowałem wszystkie divy z atrybutem clear:both <!-- <div style="clear: both"></div> --> i mimo to wszystkie divy układają się prawidłowo. Czy ktoś potrafi to wyjaśnić? Może czegoś nie zauważam. W załączeniu kod html i css.
Kod HTML:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>zad1 - divy</title>
<meta name="description" content="siatka divów w kwadracie. Zadanie z 1-go odcinka">
<meta name="keywords" content="zadanie, divy, strona internetowa">
<meta name="author" content="RW">
<meta http-equiv="X-Ua-Compatible" content="IE=edge, chrome=1">
<link rel="stylesheet" href="zad1.css">
</head>
<body>
<div class="container">
<div class="div6">div6</div>
<div class="div4">div4</div>
<div class="div2" style="background-color: yellow">div2</div>
<!-- <div style="clear: both"></div> -->
<div class="div42" >
<div class="div2" style="background-color: teal">div2</div>
<div class="div2"style="background-color: white">div2</div>
<!-- <div style="clear: both"></div> -->
<div class="div4" style="background-color: skyblue">div4</div>
</div>
<div class="div22">div22</div>
<!-- <div style="clear: both"></div> -->
<div class="div2" style="background-color: coral">div2</div>
<div class="div2" style="background-color: white">div2</div>
<div class="div2" style="background-color: coral">div2</div>
<!-- <div style="clear: both"></div> -->
<div class="div3" style="background-color: red">div3</div>
<div class="div3" style="background-color: blue">div3</div>
</div>
</body>
</html>
Kod CSS:
body{
margin: 0;
}
.container{
margin: auto;
background-color: black;
width: 600px;
height: 600px;
}
.div6{
background-color: blue;
width: 600px;
height: 100px;
}
.div4{
background-color: red;
width: 400px;
height: 100px;
float: left;
}
.div2{
width: 200px;
height: 100px;
float: left;
}
.div42{
width: 400px;
height: 200px;
float: left;
}
.div22{
background-color: green;
width: 200px;
height: 200px;
float: left;
}
.div3{
width: 300px;
height: 100px;
float: left;
}
