CSS Float

Float

float property specifies how an element should float. It’s used for positioning and formatting content.

float-left

The element floats to the left of its container

<div class="row">
    <div class="col-4">
        <h4>Float left</h4>
    </div>
    <div class="col-8" id="floatLeft">
        Hi my name is Folau
        <img src="superman.jpeg" alt="" />
    </div>
</div>
        <style>
            #floatLeft img{
                float: left;
            }
        </style>

 

 

float-right

The element floats to the right of its container

<div class="row">
    <div class="col-4">
        <h4>Float right</h4>
    </div>
    <div class="col-8" id="floatRight">
        Hi my name is Folau
        <img src="superman.jpeg" alt="" />
    </div>
</div>
        <style>
            #floatRight img{
                float: right;
            }
        </style>

 

Source code on Github

 




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published. Required fields are marked *