0build.dev
Choose a layout

clear

Report an Issue
Class Description

clear-start

Clears floated elements on the inline-start side.

CSS Rules 

.clear-start {
  clear: inline-start;
}

Usage 

<element class="clear-start" />

Responsive

Prefix .clear-start utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:clear-start" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="clear-start:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="clear-start:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before clear-start::before" />

<element class="content-after clear-start::after" />
 .clear-start Clears floated elements on the inline-start side.

clear-end

Clears floated elements on the inline-end side.

CSS Rules 

.clear-end {
  clear: inline-end;
}

Usage 

<element class="clear-end" />

Responsive

Prefix .clear-end utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:clear-end" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="clear-end:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="clear-end:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before clear-end::before" />

<element class="content-after clear-end::after" />
 .clear-end Clears floated elements on the inline-end side.

clear-left

Clears left-floated elements.

CSS Rules 

.clear-left {
  clear: left;
}

Usage 

<element class="clear-left" />

Responsive

Prefix .clear-left utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:clear-left" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="clear-left:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="clear-left:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before clear-left::before" />

<element class="content-after clear-left::after" />
 .clear-left Clears left-floated elements.

clear-right

Clears right-floated elements.

CSS Rules 

.clear-right {
  clear: right;
}

Usage 

<element class="clear-right" />

Responsive

Prefix .clear-right utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:clear-right" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="clear-right:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="clear-right:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before clear-right::before" />

<element class="content-after clear-right::after" />
 .clear-right Clears right-floated elements.

clear-both

Sets clear: both. Clears floating elements on both sides.

CSS Rules 

.clear-both {
  clear: both;
}

Usage 

<element class="clear-both" />

Responsive

Prefix .clear-both utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:clear-both" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="clear-both:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="clear-both:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before clear-both::before" />

<element class="content-after clear-both::after" />
 .clear-both Sets clear: both. Clears floating elements on both sides.

clear-none

Removes clear rules, allowing the element to float next to other floated elements.

CSS Rules 

.clear-none {
  clear: none;
}

Usage 

<element class="clear-none" />

Responsive

Prefix .clear-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:clear-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="clear-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="clear-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before clear-none::before" />

<element class="content-after clear-none::after" />
 .clear-none Removes clear rules, allowing the element to float next to other floated elements.