Floating and Containment

Float

• float-(SID)
  • DIR
    
    none left right

Docs Try it

Float lets you control how an image wraps onto text. There are three classes. None, which is

Clear

• clear-(SID)
  • DIR
    
    none left right both

Docs Try it

When you use floats in CSS, the clear properties allow you to control how those floats are cleared.

In the example you can see two images, both floated around some text.

In the clear-left example, you can see that the text unfloats or is cleared underneath the image on the left. With clear-right the text clears on the image to the right. With clear-both it's clearing the right image, but that's because it's the last thing with a float.

Object Fit

• object-(SID)
  • DIR
    
    contain cover fill none scale-down

Docs Try it

Object fit controls how an element is stretched to fit it's container. It's similar to what you'd expect when using background images.

In the example, you'll see the same image set to a height of 32 and a full width of the container. Notice how the images differ in size.

object-contain resizes an element's content so that it's contained on the area it's in.

object-cover tries to fit the content proportionally in the space alloted. I like to use that one when I need to make sure an image fits in a container proportionally.

object-fill is similar but it stretches the content to fit. If you don't add anything to an image, this is the default way it will work.

object-none fills the container, but doesn't change the size of the image.

object-scale-down will try to leave the object at it's original size, but shrinks it down if necessary.

Object Position

• object-(POS)
  • DIR
    
    left-top top right-top

left center right

left-bottom bottom right-bottom

Docs Try it

Object position controls the position of an item within it's container. It makes sense, but requires some setup.

In the example, you'll notice that I've set up a logo with the different directions.

However, you might miss that in order to get this to work, you have to set up the object-none class as well in the element, otherwise, the default behavior is for the element to fill the container.

Also, I had to give the container a class of full, otherwise, you wouldn't be able to fill the container.

Overflow

• overflow(-DIR)(-TYP)
  • DIR (overflow)
    
    x y
  • TYP (overflow)
    
    auto hidden visible scroll

Docs Try it

Overflow controls what happens once an element gets too big to hold it's container.

You can use the overflow class and then optionally add a direction, which is x or y. This will force the overflow to happen only on a specific direction.

Then you can add a type, which is the value of the parameters. That can be auto, which is the default, where it automatically tries to calculate what you need, or hidden, where it hides whatever the overflow is, visible, where it shows the content ignoring the container, scroll, where it gives you scrollbars.

If you take a look at the example, you can see that I've had to adjust a few of the elements being displayed depending on what I was trying to show. The yellow is the background color for the container.

Overscroll

• overscroll(-DIR)(-TYP)
  • DIR
    
    x y
  • TYP
    
    auto contain none

Docs Try it

Overscroll controls what happens when an element that is set to scroll is done scrolling. You can control the direction that is affected by this as well as the type.

auto is the default behavior and means that the page will continue to scroll.

contain means that once the item stops scrolling the rest of the page will not scroll.

Finally none is similar to contain, but also prevents bounce effects when scrolling past the end of the container.