21. What does 'float' mean in CSS and what are the potential issues with its use?

The float property allows an element to be shifted to the left or right, allowing text or other elements to wrap around it. Although float is useful for creating layouts, it can cause layout issues, such as "floating" parent elements, if not properly cleared.

/* Examples */
.float-left {
    float: left;
    width: 50px;
    height: 50px;
    background-color: red;
}

.float-right {
    float: right;
    width: 50px;
    height: 50px;
    background-color: blue;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}