CSS Rounded Corners 101

About the Author:

Kellye Whitney
Our staff is always looking for the latest news, technologies and trends in the developer training space.
, ,

CSS Rounded Corners 101

Float is a property in CSS that has to do with positioning. In order to understand its origin, it’d be smart to first look at a print layout and how it relates to that. In print layouts the images are set into a page so that text will wrap around them when needed, commonly referred to as “text wrap.” The float property is able to specify whether an element will float or not.

Page elements with the CSS float property applied are similar to images in a print layout as the text will flow around them. These elements remain part of the flow in a web page. This is different than page elements that have something called absolute positioning. Absolute position requires the elements to be removed from the overall flow of a web page and ignore the page wrap.

Exploring the Float Property

The float property has four valid values. These include left, right, none (a default value,) meaning the element will not float, and finally the Inherit, which assumes the float value from the element’s parent element.

There are also a few other properties to take note of before diving into any coding cases or examples of float. They include:

  • Float: The basic property that defines whether or not an element will float.
  • Clear: A property that specifies the side of an element where floating elements cannot float.
  • Overflow: A control that determines what happens if content overflows an element’s box.
  • Overflow-x: Controls what will happen to the content on the left and right sides if it overflows out of the content area.
  • Overflow-y: Controls what will happen to the content on the top and bottom sides if it overflows out of the content area.

Floats are used of course to wrap text around images and also can be used to create web layout templates. Say for example you have a logo or profile picture next to a piece of text, a pretty common sight online. If you were to resize the logo it wouldn’t bleed into the text, thus defining the float.

img {
   float: right;
   margin: 0 0 10px 10px;

That is a basic function of float. Now its counterpart of clear is a property that is used to take control of behavior around floating elements. Elements that come after a floating element will also be a part of the initial float and will flow around it. In order to avoid this, you’ll want to use the clear property that stops floating elements to not continue to float.

div {
   clear: left;

The best way to learn is to see a float in action. One of the most common ways to do this is to look at a paragraph of text and place that next to an image. We’re going to just grab some placeholder Lorem Ipsum text and put it to an image with a right hand margin.

The HTML is going to look like this.

<p><img src=" " width="120" height="140">
/* Photo of your choosing between the “ “, and paragraph of whatever you want following the > before the </p> */

Choose whatever photo you’d like hosted online and fill in the preceding paragraph with any words so we have a base sample. The following code already has an image and text in place. These are the main elements we’ll be putting the float onto. The CSS is right here.

img {
   float: right;
   margin: 0 0 10px 10px;

This will incur the text wrapping feature and complete the code. Play around with it to see how useful this can be and apply different elements onto this coding template. After that you’ll be able to apply Float Properties to all future projects.

See the Pen CSS Float Example by Mike Colagrossi (@SantinoMPC) on CodePen.