Primer CSS Layout Floats Last Updated : 19 Apr, 2022 Comments Improve Suggest changes Like Article Like Report Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. The layout is used to display the content using particular style. For example - we can change the layout of document by using display, float, alignment, and other utilities. Primer CSS Float Layout is used to set the position of an elements to the left, right, of its container along with permitting the text and inline elements to wrap around it. The float property defines the flow of content in the page. Used Classes: .float-left - This class is used to set the float to left side..float-right - This class is used to set the float to right side..clearfix - This class is used to clear the float.float-md-left - This class is used to set the float to left side on a medium screen size.float-md-right - This class is used to set the float to right side on a medium screen size. Syntax: <div class="clearfix"> <div class="float-*> Content... </div> </div> Example 1: HTML <!DOCTYPE html> <html> <head> <title>Primer CSS Layout Floats</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Floats</h3> </div> <div class="clearfix color-bg-accent-emphasis"> <div class="float-left color-bg-success-emphasis"> Floated left Content </div> <div class="float-right color-bg-success-emphasis"> Floated Right Content </div> </div> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <title>Primer CSS Layout Floats</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Floats</h3> </div> <div class="clearfix color-bg-accent-emphasis"> <div class="float-md-left color-bg-success-emphasis"> Floated left Content </div> <div class="float-md-right color-bg-success-emphasis"> Floated Right Content </div> </div> </body> </html> Output: Reference: https://primer.style/css/utilities/layout#floats Comment More infoAdvertise with us Next Article Primer CSS Layout Floats V vkash8574 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Layout Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay 2 min read Primer CSS Layout Display Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Layout - Nesting Layouts Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we wil 2 min read Primer CSS Layout Column Gutter Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. Primer CSS Gutter style 3 min read Primer CSS Layout Position Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar 3 min read Like