CSS Float

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Float

CSS Float is a CSS property that is used to push an element to the left or right, allowing other elements to wrap around it. It is commonly used to create a two-column layout for a website, where the content is placed in one column and the sidebar in the other.

You can float elements to the left or right but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side.

CSS Float works by specifying the direction of the element. If you want to float an element to the left, you use the float: left; property. To float an element to the right, you use the float: right; property. By default, the element will be pushed to the edge of its container.

The float property may have one of the three values: Left, Right, None, Inherit

.img-box {
    float: right;   
} 

It is also important to note that floated elements can overlap each other. This is a common problem when using float. To prevent this from happening, you can use the clear property. This will prevent any element from overlapping the floated element.