Can you have `float` and `clear` for the same element?


#1

Is it possible to use the float property and the clear property for an element, displaying both? If so, how would it look like?
https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-css-display-positioning/lessons/css-display-positioning/exercises/css-clear


#2

Simple answer: No. The clear property would need to apply to the parent container.

<div class="parent-container">
    <div class="floated-container"></div>
    <div class="floated-container"></div>
    <div class="floated-container"></div>
</div>

The inner divs are floats, but to prevent any conflict with the normal flow (the containers that follow the parent) we need to clear the float property.

.parent-container {
    clear: left;
}
.floated-container {
    float: left;
}