jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-12 01:00:13 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): mismatch in float container collapse example (#63653)

Browse Source 
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Ethan
2025-11-19 01:44:16 +08:00
committed by GitHub
parent da805e0f48
commit b3847dfd65
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
curriculum/challenges/english/blocks/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
View File

@@ -17,7 +17,6 @@ When an element is floated, it's taken out of the normal document flow and pushe
<link rel="stylesheet" href="styles.css">
<div class="container">
<img src="https://placehold.co/150x150" alt="Placeholder Image">
<p> This is an example of text flowing around a floated image.</p>
</div>
```
@@ -25,7 +24,6 @@ When an element is floated, it's taken out of the normal document flow and pushe
.container {
border: 1px solid black;
padding: 10px;
height: 200px;
}
img {
@@ -51,6 +49,10 @@ Floats were also popular for creating multi-column layouts before Flexbox and Gr
```
```css
.container {
border: 1px solid black;
}
/* Clearfix CSS */
.container::after {
content: "";
@@ -71,6 +73,8 @@ img {
- `display: block` makes the pseudo-element a block-level element.
- `clear: both` ensures the pseudo-element clears both sides of any floated elements above it.
In the above example, we've added a new paragraph element to make the collapse more noticeable. Because the paragraph remains in the normal document flow, the container expands just enough to wrap around it. Then, we apply the clearfix technique to fix the collapse and make the container's border display correctly. You can try removing the clearfix rule to see the container collapse again.
The clearfix technique ensures the parent element wraps around its floated children properly. Clearfix forces the parent container to "see" the floated child elements by adding a clear property after the floated content.
While floats are no longer the go-to method for complex layouts due to more modern techniques like Flexbox and Grid, they still play an essential role in certain scenarios. Whether you're wrapping text around images or working on legacy projects, understanding how floats work and how to clear them properly is key to maintaining well-structured and responsive layouts.