Problem z float - małe marginesy

pytanie zadane 11 lipca 2018 w HTML i CSS przez emanuel123 Nowicjusz (120 p.)

Cześć,

Dlaczego po stworzeniu poniższej strony odstępy(marginesy) pomiędzy div o klasie "title4" a "title5" jest mniejszy niż w przypadku innych div. Marginesy są ustawione prawidłowo.

Dopiero po dodaniu "float:left" w klasie title5 marginesy robią się prawidłowe - nie rozumiem tego. Prośba o wytłumaczenie dlaczego tak jest, co robię źle

<DOSCTYPE! html>
<html lang="pl">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <div id="container">  

        <div class="top">            
            <div id="logo">TESST</div>
            <div id="zegar">23:25:00</div>
            <div style="clear:both;"></div>            
        </div>
        
        <div class="square">    
            <div class="tile1">YT</div>
            <div class="tile2">FB</div>
            <div style="clear:both;"></div>
            <div class="tile3">FOTO</div>        
        </div>
        

        <div class="square">
            <div class="tile4">FB</div>
            <div class="tile5">Cytat</div>
        </div>

        <div style="clear:both;"></div>

    </div>

</body>
</html>

body
{
	background-color: #303030;
	color: #ffffff;
}

#container
{
	width:	1000px;
	margin-left: auto;
	margin-right: auto;
	background-color: purple;
}

.top
{
	width:	960px;
	margin: 20px;
}

.square
{
	width:	50%;
	float:	left;
}

#logo
{
	float:	left;
	font-size:	70px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#zegar
{
	float:	left;
	font-size:	70px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.tile1
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}

.tile2
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #ff0000;
	float: left;
}

.tile3
{
	margin:10px;
	width: 480px;
	height: 480px;
	background-color: #000000;

}

.tile4
{

	margin:10px;
	width: 480px;
	height: 480px;
	background-color: #666666;
	

}

.tile5
{	
	clear:both;
	margin:10px;
	width: 480px;
	height: 142px;
	background-color: orange;

}

komentarz 11 lipca 2018 przez kenjiro244 Dyskutant (8,600 p.)

Może nie jest to odpowiedź na pytanie ale wyobraź sobie że wpisujesz coś takiego:

"Tesst . Zegar Zegar"
"YT FB Fbszary Fbszary"
"Foto Foto Fbszary Fbszary"
"Foto Foto Fbszary Fbszary"
"Foto Foto Cytat Cytat"

I w taki sposób możesz dowolnie ustawić elementy na stronie, nie ważna jest kolejność ich w html dodatkowo nie potrzebujesz żadnych pojemników czy innych niepotrzebnych div-ów. Wszystko ładnie w jednym divie na całą stronę. Cały układ możesz zmienić od kolejności po wielkość konkretnych div-ów z grubsza w tych 5 linijkach. Wszystko dzięki Grid.