Box

Utilities for box-sizing, clear and float.

Box Sizing

Using box-s-[*], you can control whether the browser includes padding and borders when calculating an element's total size.

box-s-
200px width, 10px border & 10px padding
Using "box-s-border", the element's size includes padding and border.
200px width, 10px border & 10px padding
Using "box-s-content", the element's size doesn't include padding and border.

Float

Using float-[*], you can control the wrapping of content around an element.

float-

Looks like the magician's assistant took his disappearing act a little too seriously and poof! vanished right into thin air. Now, the poor magician is flying solo and still trying to conjure up his missing partner. Let's hope he doesn't make himself disappear in the process!

Clear

Using clear-[*], you can control the wrapping of content around an element.

clear-

Looks like the magician's assistant took his disappearing act a little too seriously and poof! vanished right into thin air. Now, the poor magician is flying solo and still trying to conjure up his missing partner. Let's hope he doesn't make himself disappear in the process!