Primer CSS Layout Floats

Last Updated : 19 Apr, 2022

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

Primer CSS Layout - Nesting Layouts

vkash8574

Improve

Article Tags :

Primer CSS Layout Floats

HTML

HTML

Similar Reads