css: clearfix

100%

✓ Published0🌍 Public

Last edited Mar 22, 2013

Created on Mar 22, 2013

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.

AI-generated description

Similar vizzes

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

65% 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

62% 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…

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

59% 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

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…

Hello VizHub

This example demonstrates two text blocks positioned side by side using CSS floating and overflow properties. The first block is floated left with a fixed width, while the second block uses `overflow: hidden` to prevent wrapping beneath it. The layout is defined in an external `styles.css` file, with borders on each element and the wrapper to visualize their dimensions. The HTML structure contains two divs with static Stack Overflow content, and no JavaScript or data visualization libraries are involved.

JJoker-tr

58% match

Loading thumbnail…

CSS Columns

This example demonstrates text content arranged in multiple columns using CSS multi-column layout. The page shows a series of paragraphs flowing across four columns defined with the `columns: 4 250px` property, with a three-pixel solid column rule and a three-rem gap separating them. One quote is styled with a larger font, centered text, and a `column-span: all` property to break across all columns, while the author attribution uses `white-space: nowrap` to prevent line breaks. The code relies on the standard CSS Multi-column Layout module and the Roboto font loaded from Google Fonts.

WWRCIECH

58% match