Dlaczego poniżej divów z atrybutem float:left divy prawidłowo się układają mimo braku atrybutu clear:both?

pytanie zadane 14 sierpnia 2017 w HTML i CSS przez wawszczur Użytkownik (610 p.)

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  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;
}

1 odpowiedź

odpowiedź 14 sierpnia 2017 przez pablop76 VIP (123,120 p.)

Witam. Upakowałeś wszystko w sztywny kontener. Usuń szerokość tego kontenera a zobaczysz dlaczego należy czyścić przepływ.

pytanie zadane 14 sierpnia 2017 w HTML i CSS przez wawszczur Użytkownik (610 p.)
zamknięte 14 sierpnia 2017 przez Arkadiusz Waluk W przykładzie MZ też jest sztywny kontener a mimo to trzeba czyścić przepływ...