HTML: div doesn't stretch out?

According to this website

https://www.w3schools.com/html/html_blocks.asp

a div is a block element and "a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)."

Then why does this code not color the upper part of the page red?:

<!DOCTYPE html>
<html lang="de">
    
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="pragma" content="no-cache">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    
    <style type="text/css">
    
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: grey;
        }
    
    
    </style>
    
    
</head>
    
<body>
    
    
    <div style="background: red;float: left; height: 20%;"></div>
    
    
</body>
</html>

When I add "width = 100%" to the style of the div, I get what I expect without that variable. Why doesn't it stretch out by itself?

Solution

A floated empty div has no height or width.

You've given it a height, but it still has zero width. Only when it also has a width (or some content) will you see it.

The default block behaviour you've referenced doesn't apply to a floated element.