Float Clear

Control element floating and clearing

Syntax

layout="float:[value]" or layout="clear:[value]"

Values

Value	CSS Output	Description
left	float: left	Float left
right	float: right	Float right
none	float: none	No float
clear-left	clear: left	Clear left floats
clear-right	clear: right	Clear right floats
clear-both	clear: both	Clear all floats
clear-none	clear: none	No clear

Examples

<img layout="float:left">Float left</img>
<div layout="clear:both">Clear floats</div>

Preview

Float Left

layout="float:left" - Element floats to the left of content

Float

Text wraps around the floated element naturally.

View Code

<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div layout="float:left" space="p:small m-r:small m-b:small" visual="bg:primary text:white rounded:small">Float</div>
  <p visual="text:neutral-800 dark:text:neutral-200">Text wraps around the floated element naturally.</p>
</div>