Moving an element box from its original position to another position is called “floating”.

You can float an element; i.e., move it to a required position, by setting thefloatproperty to left, right, or both. The block following the image/block that is being moved will wrap around the image/block that is being moved. The following are behaviors of each value.

left

Create a block box which is floated to the left. The following content will wrap on the right starting at a position adjacent to the top side of that block box.

right

Create a block box which is floated to the right. The following content will wrap on the left starting at a position adjacent to the top side of that block box.

none

The element box will not be floated.

You need to set, in advance, the width of the object which you want to float using either the width property of the CSS or the width attribute of the HTML.

When you make an element float, the following element(s) will wrap around the object being floated. However, sometimes you would like to position it below the object. In that case, you can stop the wrapping and position the following elements below the block by setting theclear property to left, right, or both.

Let us float an image.

.hidari {
  float: left;
}

.migi {
  float: right;
}

.cll {
  clear: left;
}

Let us define floating to the left and right (“hidari” and “migi”) as well as clearing the floating to the left (“cll”) as shown above, applying these as follows:

<p> 
  <img src="./hearn.jpg" alt="Hearn先生" width="60px" class="hidari"> 
  The image is inserted here, but it will be floated to the left.  

  When you float the image to the left, the image is displayed on the left; 

  however, the following text will wrap on the right of the image.
</p> 
<p class="cll"> 
  <img src="./hearn.jpg" alt="Hearn先生" width="60px" class="migi"> 
  With regard to the next p element, first of all, floating to the left is suspended (class=“cll”).  

  After that, the image is floated to the right.  You can see that the image is now displayed 

  to the right of the texts.
</p> 

On the Web Browser, it will be displayed as follows:

By the way, what happens if there is no “class=‘"cll"’”; i.e., suspension of floating (suspension of wrapping)? In that case, the second p element will be displayed to the right of the image because the image is still floated to the left. Accordingly, it will be displayed as follows:

This time, let us float a text box to create a column formation.

.flbox {
  height: 120px;
  width: 100px;
  margin: 5px;
  padding: 7px;
  background-color: #eea;
  float: left;
}

.mainbox {
  width: 300px;
  margin-left: 130px;  /* flboxのボックス幅(100+5*2+7*2=124) + 6 px */
  padding: 7px;
}

As shown above, you define a style for the element which is being floated to the left (.flbox) as well as a style for the main text to be positioned to the right of that element (.mainbox), using these in HTML in such manner as follows:

<div class="flbox"> 
  <p>
  This block will be floated to the left.  The background color is also changed.
  </p>
</div> 
<div class="mainbox"> 
  <p>
    This is the main text which is not floated.
  </p>
  <p>
    As I made the p element above floated to the left, I can keep writing the main text without a break.

    However, if the main text becomes very long, it will wrap and go under the block which is being 

    floated to the left.
  </p>
  <p>
   To avoid that, I set a margin to this block; i.e., a margin-left, as large

   as the width of the box being floated to the left.
(Actually, the margin-left includes extra 6 px.)

  </p>
</div> 

On the Web Browser, it will be displayed as follows:

As stated in the sample text above, the style applied to the main text has a margin-left property as large as the width of the whole block which is floated to the left (width + left and right margin + left and right padding). (Actually, the margin-left includes extra 6 px.) Because of this, even if the main text becomes long, it won’t wrap/go under the box which is being floated to the left.

Texts and inline boxes (boxes the inline elements create) are casted into the block box (a box the block-level element creates). (See the image below.)

Here, the line width (the length of the line) will be the length set by the width property if the property has been defined or the length worked out automatically in accordance with the margin, padding, and the width of the parent box if the property has not been defined.

In addition, there is created a box called “line box” which includes multiple inline boxes making up one line (the purple box in the image above.) The height of the inline boxes inside this “line box” is determined by the line-height property. (Refer to the image above.)

The text-align property and vertical-align property which set the horizontal and vertical position of the inline boxes in the line (line box) will be explained below.

Let us use the text-align property which aligns the horizontal position of the text. This is the same as the justification to the center or left/right which you do when you use, for example, a word processor.

Values you can set are left,right,and center. You know how these things behave, don’t you?

Then, let us use these elements now.

.al {
  text-align: left;
}

.ar {
  text-align: right;
}

.ac {
  text-align: center;
}

Let us define the style as shown above and use them in HTML as follows:

<p class="al"> 
  December 1, 2005<br>
  December 1, 2005
</p> 
<p class="ar"> 
  December 1, 2005<br>
  December 1, 2005
</p> 
<p class="ac"> 
  December 1, 2005<br>
  December 1, 2005
</p> 

Then, on the Web Browser, it will be displayed as follows:

You use 、 vertical-align property to set the vertical position. Although there are many kinds of values for this property, only generally used properties, top and middle, are shown here.

.atop {
  vertical-align: top;
}
.amid {
  vertical-align: middle;
}

Let us define the style as shown above and use them in HTML as follows:

<p> 
  Professor Hearn
  <img src="./hearn.jpg" alt="似顔絵" width="40px" class="atop">
  is said to have a face like this.
</p>
<p> 
  Professor Hearn
  <img src="./hearn.jpg" alt="似顔絵" width="40px" class="amid">
  is said to have a face like this.
</p> 

Then, on the Web Browser, it will be displayed as follows:

As you can see from this, when the value of the vertical-align property is top/middle, object inline boxes will be aligned to the top/middle of the line box.

You use line-height property to set the height of the inline box. The space between lines of the text is determined by the value of this property and the font-size property.

.lwide {
  line-height: 2em;
}

.lnarrow {
  line-height: 0.9em;
}

Let us define the style as shown above and use it in HTML as follows:

<p> 
  No line-height is set for this block.<br>
  This will be the standard space between lines.
</p> 
<p class="lwide"> 
  The value of the line-height property is 2 em for this block.<br>
  The space between lines is very wide, isn’t it?
</p> 
<p class="lnarrow"> 
  The value of the line-height property is 0.9 em for this block.<br>
  The space between lines is narrower, isn’t it?
</p> 

Then, on the Web Browser, it will be displayed as follows:

You use text-indent property to set the amount of indentation that appears before the first line. The value may be negative.

p.ind {
  text-indent: 1em;
}

p.ind_minus {
  text-indent: -2em;
  margin-left: 2em;
}

Let us define the style as shown above and use them in HTML as follows:

<p> 
  No text-indent is set for this block.<br>
  There is no indentation for either the line above, the first line of the paragraph, or this line.
</p> 
<p class="ind"> 
  The value of the text-indent property is 1 em for this block.<br>
  The line above, the first line of the paragraph, is indented as much as one 

  character’s worth.
</p> 
<p class="ind_minus"> 
  The value of the text-indent property is -2 em for this block.<br>
  The line above, the first line of the paragraph, is indented to the left as much as 

  two characters’ worth.

  Two characters’ worth margin-left property is set because, otherwise, the text 

  would flow out of the box.
</p> 

Then, on the Web Browser, it will be displayed as follows: