Why is overflow:hidden; doesn't hide the text next to the float block?

Question

css

As far as I understand overflow: hidden; hides all the content that crawls out of the block /
In my case with float, it does not hide the text on the left, but simply shifts it down the width of the block in which it is located:

Why isn't he hiding?

Answer 1

There are the concepts of the flow of elements in a document and the formatting context . Lowercase are arranged in the stream from left to right, block - from top to bottom. Float causes other elements in the stream to flow around the specified one. This is exactly what you see in the first example.
Certain properties create a new context (overflow, display with some values, and others). The new context creates its own stream of elements. You see it in the second example.

Answer 2

It will work if you set the bottom margin:

.float-left {
  margin-bottom: 70px /* = 100px - 30px (высота родительского блока - высота блока .float-left) */
}