{"version":"1.0","type":"rich","title":"CSS Floats","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/283c882610d14ca498bcb8bc77b5cd6b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}