Why "clear: left;" solves the problem of the wrapped caption from the 1st line, pushing out images from the 2nd line?

Hi Wojti Sap
Simply put it tells the images to sit bellow the previous one rather than continue wrapping around. Take a look at the teachers note for an updated method as it's a correction to the video.

Also here is some further reading to help understand what's going on:

A List Apart CSS Floats 101

The clear property has five values available: left, right, both, inherit, and none. Assigning a value of left says the top edge of this element must sit below any element that has the float: left property applied to it. The same concept applies for the right value—the element must sit beneath any element that has the float: right property applied to it. Using the both value tells our element that its top edge must sit below any element floated either left or right. The inherit value takes on the clear property from its parent element, while the default value none behaves as you would expect.

CSS Tricks All About Floats