clearfix hack for floats #css

100%

clearfix hack for floats #css

✓ Published0🌍 Public

Last edited Oct 29, 2018

Created on Oct 29, 2018

A CSS code snippet demonstrates the clearfix hack, a technique that prevents a containing element from collapsing to zero height when its children are floated. The example uses the `.clearfix::after` pseudo-element with `content`, `clear`, and `display` properties in a SCSS file. This approach renders a hidden table element after the container, which clears the floats and restores the container’s height. The code shows the standard modern clearfix pattern, relying on CSS pseudo-elements and the `clear` property rather than JavaScript libraries or external rendering APIs.

AI-generated description

Similar vizzes

Loading thumbnail…

css: clearfix

This example demonstrates a CSS technique for containing floated child elements within a parent container, using a clearfix pattern. It shows a `:after` pseudo-element on the `.group` class that generates empty content, sets the element to `display: table`, and applies `clear: both` to force the parent to expand and include its floated children. The code relies on the CSS `content` property and the `display` and `clear` properties, with no external libraries or JavaScript. This approach is applied directly to a class selector, ensuring the parent wraps around its content without needing extra markup.

BBraMKJ

83% match

Loading thumbnail…

CSS Floats

This example demonstrates how CSS floats affect the layout of text and block elements within an HTML document. It uses standard HTML elements and the CSS properties `float`, `margin`, and `display: flow-root` to create left- and right-floating black squares that wrap surrounding paragraph text. The page pulls the Roboto font from Google Fonts via `@import` and applies it to the body, while the `section` element showcases `flow-root` to contain nested floats. No JavaScript or external visualization libraries are used; the effect relies entirely on core CSS.

WWRCIECH

66% match

Loading thumbnail…

Fork of CSS Flexbox 2

This example demonstrates CSS Flexbox layout behavior using two numbered boxes inside a bordered container. The `style.css` file applies `display: flex` with `justify-content: center`, `align-items: center`, and `flex-flow: row nowrap` to center items both horizontally and vertically, while the second box uses an `order: -1` property to reverse its visual position. Custom flex properties (`flex: 1 1 40%` and `flex: 2 2 40%`) control relative sizing and growth, with `gap: 1rem` adding spacing between items. The HTML structure includes commented-out boxes 3–6, leaving only two visible elements rendered in black with white text.

WWRCIECH

60% match

Loading thumbnail…

Gist 31d1125ec64ede7d29fc4d096250e64a

A CSS flexbox playground demonstrates how container properties and per-item order values rearrange a set of nine colored boxes. The code uses flexbox layout APIs such as `display:flex`, `justify-content`, `align-items`, `align-content`, and `align-self` to control horizontal and vertical spacing, wrapping, and individual item alignment. It also highlights the `order` property with negative and high positive integers to change visual sequence, and includes commented-out alternatives like `space-around` and `center` to show variations. The example is written entirely in plain CSS within a flexbox.css file.

LLayne Smith

60% match

Loading thumbnail…

CSS Flexbox

A CSS Flexbox layout demonstrates responsive box arrangement using the Flexbox model. Six numbered black boxes with white text are centered within a bordered container, wrapping onto multiple lines with a one-rem gap between them. The code uses `display: flex`, `justify-content`, `align-items`, `flex-flow`, and `align-content` properties to control alignment and wrapping. It imports the Roboto font from Google Fonts and applies a plain HTML structure with no JavaScript or external data sources.

WWRCIECH

60% match

Loading thumbnail…

Responsive Images #css #style

This example demonstrates a pure CSS technique for making images responsive and retina-ready. It uses the `img` element with `max-width: 100%`, `display: block`, and `height: auto` to ensure images scale fluidly within their containers while maintaining aspect ratio. The comment notes that for retina displays, the width and height attributes should be set to half the original file dimensions. The CSS relies solely on standard style rules, with no JavaScript libraries or external APIs, and applies globally to all images in the document.

TTimeBandit

59% match

Loading thumbnail…

CSS 将显示不完的多余字符用省略号代替兼容各主要浏览器 IE6+、FF、Chrom

This example demonstrates CSS techniques for truncating overflowing text with ellipses in both single-line and multi-line layouts. The single-line method applies the `text-overflow: ellipsis` property alongside vendor-prefixed versions (`-o-text-overflow`, `-moz-text-overflow`, `-webkit-text-overflow`) and requires `white-space: nowrap` and `overflow: hidden`. For multi-line text, the approach simulates ellipsis by positioning a child `<div>` containing "..." absolutely at the bottom-right corner over a relative-positioned container with `overflow: hidden`. The code uses only standard HTML and CSS, with no external libraries or data sources.

LLaughingVzr

59% match

Loading thumbnail…

SCSS only context aware item

This example demonstrates a context-aware list layout where each item’s size and spacing adjust dynamically based on the total number of items. It shows how list items can be styled to occupy equal width when there are four or fewer items, but grow and shrink to fill available space when more items are present. Using SCSS and the `:nth-last-child` selectors, the code applies conditional flexbox properties (`flex-grow`, `flex-shrink`, `flex-basis`) to create responsive behavior. The unordered list and list items are styled with flexbox in the provided `_style.scss`, while the HTML contains ten list items with simple "Item" labels.

BBraMKJ

58% match