Float

Exercise

In the "index.html" file, replace the code with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>Float Property</h1>
  <div>
    <img src="./images/small-game.jpg" alt="Small Game Image">
    <p>In CSS, the float property is used to position an
       element to the left or right of its container. When an 
       element is floated, it is taken out of the normal
       document flow, which means other elements on the page 
       can wrap around it. This can be useful for creating 
       layouts with columns or for positioning images within a 
       block of text. When an element is floated, its width is 
       automatically set to "auto" unless otherwise specified, 
       and its height is determined by the content it contains.
    </p>
  </div>

  <div>
    <img src="./images/small-game.jpg" alt="Small Game Image" class="float-right">
    <p>Floating an image to the right in CSS is a common 
       technique used to position an image on the right side of 
       a block of text or other content. This can help to break
       up large blocks of text and add visual interest to a web 
       page or document. To float an image to the right, you
       can use the CSS float property with a value of "right". 
       This will cause the image to be positioned to the right 
       of any preceding content and aligned with the top of the 
       content. If the content following the image is long 
       enough, it will wrap around the image and flow to the 
       left of it. It's important to use the appropriate CSS 
       clearing techniques to ensure that the content after the 
       floated image is positioned correctly and not 
       affected by the float.</p>
  </div>
  <div>
    <img src="./images/small-game.jpg" alt="Small Game Image" class="float-left">
    <p>When an image is floated to the left, it is aligned to 
       the left margin of the containing element and the text or
       content that follows it will wrap around the image on 
       its right side. This allows for text to flow seamlessly 
       around an image, creating a more visually appealing 
       layout. Floating an image to the left can be useful for 
       adding visual interest to a page, breaking up large 
       blocks of text, and creating a more balanced layout. 
       However, it's important to ensure that the text doesn't 
       become too cramped around the image and that the image 
       doesn't overwhelm the surrounding content. Proper use of 
       margins, padding, and the clear property can help 
       prevent these issues.</p>
  </div>
  <div>
    <img src="./images/small-game.jpg" alt="Small Game Image" class="float-right">
    <p class="clear">It's important to note that floated 
       elements must have a specified width in order to be 
       positioned correctly. Also, if all of the elements 
       within a container are floated, the container's height 
       will collapse to zero, which can cause layout
       issues. To avoid this, you can use a clearfix to clear 
       the floats and restore the container's height.</p>
  </div>
</body>

</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
In the "styles.css" file, replace the code with the following:

div {
  border: 5px solid blue;
  padding: 10px;
  margin: 5px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.clear {
  clear: both;
}

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`float`

In CSS, float is a property that allows elements to be placed horizontally on a page, such as images and text, and is often used for creating layouts. When an element is floated, it is taken out of the normal flow of the page and moved to the left or right of its container. This can be useful for creating multi-column layouts or for positioning images and other content within text. The float property can be set to left, right, or none. It is important to note that floated elements can sometimes cause layout issues and may need to be cleared to prevent unintended layout problems.

`clear: both;`

In CSS, the clear property specifies whether an element should be moved below (cleared) floated elements that precede it. When an element is floated, it is taken out of the normal flow of the document, which can cause other elements to wrap around it. The clear property specifies which sides of an element are not allowed to be adjacent to a floated element. This property is commonly used with the float property to position elements in a particular way. The clear property can take several values such as left, right, both, and none. The left value means that the element must be moved below any left-floating elements, right means the element must be moved below any right-floating elements, both means the element must be moved below any left- or right-floating elements, and none means that the element can be adjacent to any floating elements.

Experiment with the Code

Try adding your own image to an existing <div> and float it.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References

Learn2BuildApps