Learn HTML

CSS Introduction

CSS Basic Syntax

CSS Selector

CSS Units

CSS Text

CSS Border

CSS Outline

CSS Padding

CSS Margin

CSS Height & Width

CSS Overflow

CSS Resize

CSS Background

CSS Box Sizing

CSS Position

CSS Float

CSS Clear

CSS Clip Path & Shape Outside

CSS Display

CSS Media Queries

CSS Pseudo Classes & Elements

CSS Filter

CSS Transition

CSS Transform

CSS Animation

CSS List Style

CSS Table

CSS Scrollbar Styling

CSS Icon

CSS Cursor

CSS Variable & Calc

CSS User Select

CSS Flexbox

Learn Javascript

Learn Django

Everything about css clear property

What is clear property in css?

Imagine there are two div or box one after another. If some how the data of first div or box increases then the first div or box will overflow on second div or box. If it's happen then second div or box will be hide for the first div or box. To solve this problem we use clear property.
It has three values:
clear:left;
Use this value to clear left side for solve left side box overflow problem.
clear:right;
Use this value to clear right side to solve right side box overflow problem.
clear:both;
Use this value to clear both side to solve both side box overflow problem.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    #first_heading{
        border:solid 5px red;
        float:left;
        width:40%;
    }
    #medium{
        border:solid 5px red;
        float:right;
        width:40%;
    }
    .last_heading{
        border:solid 5px blue;
        clear:both;
    }
</style>
</head>
<body>

<div id="first_heading">
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
</div>
<div id="medium">
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
</div>
<div class="last_heading">
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
    Welcome to this website
</div>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us

© Copyright All rights reserved www.CodersAim.com. Developed by CodersAim.