float
📗 float (CSS-Tricks)
key points
a floated element is automatically
display: block.a floated element remains a part of the page flow, distinctly different than absolutely positioned elements, which are removed from the page flow.
example
💾 replit
/* Font Awesome */
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css");
body {
background: rgb(73, 72, 72);
color: #ccc;
}
h3 {
color: tomato;
}
code {
border: thin solid black;
padding: 1px 4px 2px;
background-color: purple;
border-radius: 4px;
}
/* -- custom styling for all icons -- */
.fas, .fab {
border: 1px solid black;
font-size: 48px;
background-color: white;
color: black;
}
/* -- custom styling for specific icons -- */
.fa-fish {
color: salmon;
}
.fa-frog {
color: green;
}
.fa-user-ninja.vanished {
opacity: 0.8;
}
.fa-facebook {
color: rgb(59, 91, 152);
}
/* float */
.float-right {
float: right;
}
.clear-right {
clear: right;
}Last updated
Was this helpful?