CSS Floats

100%

✓ Published1🌍 Public

Last edited Jan 31, 2023

Created on Jan 30, 2023

Forked from Fork of CSS Display 2 (lists)

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.

AI-generated description

https://youtu.be/OXGznpKZ_sA?t=10820

MIT Licensed

Similar vizzes

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

74% match

Loading thumbnail…

CSS Display

This example contrasts default block-level paragraph styling with an inline-block span by using the CSS `display` property. The page shows how inline-block elements respect vertical margins and padding, while the surrounding paragraphs remain gray blocks. Rendering relies on HTML structure and the linked Roboto font from Google Fonts, with all visual behavior defined in the included stylesheet. No JavaScript or external visualization libraries are used; the example is purely static.

WWRCIECH

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

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

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

68% match

Loading thumbnail…

Fork of CSS Display 2 (lists)

This example demonstrates a simple horizontal navigation menu with links to Intro, Portfolio, and Projects sections. It shows how CSS list properties and inline-block positioning create a right-aligned, black-background nav bar where links appear in white and gain an underline on hover or focus. The code uses HTML unordered lists alongside CSS styling with Google Fonts’ Roboto typeface loaded via @import, relying on properties like list-style-type, display, margin-inline, and text-decoration to achieve the visual layout.

WWRCIECH

66% match

Loading thumbnail…

CSS Starter

A static HTML page styled with CSS demonstrates a text-heavy layout for learning CSS. The page contains a header and a main paragraph of placeholder text, styled with a custom stylesheet. The CSS applies a universal reset, sets container width to 50%, adds a dashed red border, and adjusts font size, padding, and margin. The example uses no JavaScript or data visualization libraries; it relies solely on the `style.css` file to render basic typographic and box-model properties.

WWRCIECH

65% match

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

65% match