Issues with Floats and Layouts

Learn about the problem with floats through an example.

We’ll begin with the following scenario: we have a floated inner div, but the outer div that wraps it is not floated. The issue here is that the non-floated parent will not be aware of the height of its floated child div.

Non-floated parent floating a child div

Here’s the HTML, CSS, and the corresponding output:

Get hands-on with 1200+ tech skills courses.