4 min read
•Question 22 of 49mediumHow Does CSS Float Work?
Understanding float and clearing floats.
What You'll Learn
- Float behavior
- Clearing floats
- Modern alternatives
Float Values
styles.cssCSS
.element {
float: left;
float: right;
float: none;
}Clearing Floats
styles.cssCSS
/* Clear on next element */
.clear {
clear: both;
}
/* Clearfix on parent */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Modern: use overflow */
.parent {
overflow: auto;
}
/* Best: use display: flow-root */
.parent {
display: flow-root;
}Modern Alternatives
styles.cssCSS
/* Use flexbox instead */
.container {
display: flex;
justify-content: space-between;
}
/* Or grid */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}