CSS Layout - Float & Clear

Float Property in CSS

  • The CSS float property specifies how an element should float.

  • The float property is used for positioning and formatting content.


Values of Float Property

i) left- The element floats to the left of its container.

ii) right - The element floats to the right of its container.

iii) none - The element does not float (will be displayed just where it occurs in the text). This is the default value of a float.

iv) inherit - The element inherits the float value of its parent


Using Float Property

<!DOCTYPE html>
<html>
<head>
    <title> Float property in CSS </title>
    <style>
        img {
            float: right;
            width: 170px;
            height: 170px;
            margin-left: 15px;
        }
    </style>
</head>
<body>

    <p> This is Geeks Help logo </p>
    <img src="logo.png" alt="Geeks Help">

</body>
</html>

Output:

css float property, float property in css example, css float left, css float right, css float none


Clear Property in CSS

  • The clear CSS property sets whether an element must be moved below (cleared).

  • The clear property specifies what should happen with the element that is next to a floating element.


Values of Clear Property

i) none - The element is not pushed below left or right-floated elements. This is the default.

ii) left - The element is pushed below left-floated elements.

iii) right - The element is pushed below the right floated elements.

iv) both - The element is pushed below both left and right-floated elements.

v) inherit - The element inherits the clear value from its parent


Using clear property

<!DOCTYPE html>
<html>
<head>
    <title> Float and Clear in CSS </title>
    <style>
        .div1 {
            float: left;
            padding: 10px;
            border: 3px solid #73AD21;
        }

        .div2 {
            padding: 10px;
            border: 3px solid red;
            clear: left;
        }
    </style>
</head>
<body>

    <h2> Clear Left </h2>
    <div class="div1"> Div 1 </div>
    <div class="div2"> This is our 2nd div </div>
    <br><br>

</body>
</html>

Output:

css clear property, css clear float property, css clear both,

CSS Layout - Float & Clear Property Part-10 PDF

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad