BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

207What is Normal Flow?
208Block-Level Elements in Normal Flow
209Inline Elements in Normal Flow
210Inline-Block Display
211The position Property: Overview
212Static Positioning
213Relative Positioning Fundamentals
214Offset Properties: top, right, bottom, left
215Relative Positioning as Containing Block
216Absolute Positioning Fundamentals
217The Containing Block Concept
218Absolute Positioning with No Positioned Ancestor
219Centering with Absolute Positioning
220Fixed Positioning
221Fixed vs Absolute Positioning
222Sticky Positioning Fundamentals
223Sticky Positioning Thresholds
224Sticky Positioning Containing Block
225Common Positioning Pitfalls
226Choosing the Right Positioning Scheme
227What is a Stacking Context?
228The Root Stacking Context
229Creating Stacking Contexts with z-index
230Stacking Contexts Without z-index
231Flexbox and Grid Contexts
232Stacking Order Within a Context
233Parent-Child Context Boundaries
234Isolation Property
235Debugging Stacking Issues
236Practical Stacking Patterns
237Float Basics and Original Purpose
238Float Values and Element Behavior
239The Clear Property
240Clearfix Techniques
241Float-Based Layouts
242Float Layout Limitations
243When Floats Are Still Appropriate
244Migrating from Float Layouts
245Understanding overflow: visible, hidden, scroll, and auto
246overflow-x and overflow-y for directional control
247Creating scrollable containers with overflow: auto
248text-overflow and ellipsis for truncated text
249The visibility property: visible, hidden, and collapse
250overflow: clip and overflow-clip-margin
251Scrollbar styling with ::-webkit-scrollbar
252overflow patterns: sticky headers and modal scrolling

Web Development

207What is Normal Flow?
208Block-Level Elements in Normal Flow
209Inline Elements in Normal Flow
210Inline-Block Display
211The position Property: Overview
212Static Positioning
213Relative Positioning Fundamentals
214Offset Properties: top, right, bottom, left
215Relative Positioning as Containing Block
216Absolute Positioning Fundamentals
217The Containing Block Concept
218Absolute Positioning with No Positioned Ancestor
219Centering with Absolute Positioning
220Fixed Positioning
221Fixed vs Absolute Positioning
222Sticky Positioning Fundamentals
223Sticky Positioning Thresholds
224Sticky Positioning Containing Block
225Common Positioning Pitfalls
226Choosing the Right Positioning Scheme
227What is a Stacking Context?
228The Root Stacking Context
229Creating Stacking Contexts with z-index
230Stacking Contexts Without z-index
231Flexbox and Grid Contexts
232Stacking Order Within a Context
233Parent-Child Context Boundaries
234Isolation Property
235Debugging Stacking Issues
236Practical Stacking Patterns
237Float Basics and Original Purpose
238Float Values and Element Behavior
239The Clear Property
240Clearfix Techniques
241Float-Based Layouts
242Float Layout Limitations
243When Floats Are Still Appropriate
244Migrating from Float Layouts
245Understanding overflow: visible, hidden, scroll, and auto
246overflow-x and overflow-y for directional control
247Creating scrollable containers with overflow: auto
248text-overflow and ellipsis for truncated text
249The visibility property: visible, hidden, and collapse
250overflow: clip and overflow-clip-margin
251Scrollbar styling with ::-webkit-scrollbar
252overflow patterns: sticky headers and modal scrolling

← Web Development

Lesson 240 of 2,982·4. CSS Layout FoundationsPro lesson

Clearfix Techniques

Solving container collapse when children are floated using clearfix patterns and overflow methods.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course