How to insert a clear float

Clear float enables users to insert text below a left or right aligned image, as opposed to beside it. 

  1. From the Administration bar, click on My Workbench.
     
  2. Select the Create/Manage Content tab and select the content type you wish to use. 
     
  3. For this tutorial, a web page content type will be used. Select Web Page. 
     
  4. Click Add web page.
    Add web page button.
  5. Upload an image.Upload image field.
  6. Insert an image into the body and add appropriate alternative text when prompted.
     
  7. Click on the image to select it. 
    Selected image.
  8. In the toolbar, select either Align Image Left or Align Image Right icon.
    Image align icons.
  9. Click on the body beside the image to un-select the image.
    Unselected image.
  10. Press "Enter" on the keyboard to go to a new line to create a new <p> tag in the source code. 
    Unselected image of a flower and cursor in a new line.
     
  11. Click on the Insert Float Clear icon. 
    Insert clear float icon.
    Note: To insert a clear float into an existing content type with text beside the image, move the text down by one line by placing your cursor before the beginning of the text and pressing "Enter", then click on the insert float clear icon. 
     
  12. Add text below the image, and other content you wish to add. 
    Image of flower with This is a flower text below it.
  13. Click Save.
     
  14. Change the moderation state to Published and click Apply.
    Moderation state changed to published with the apply button.