What is css clear property?

Hi friends,in this post I am sharing css clear property .We are using float property to move an image(or) text from  right or left according to our needs in an element.But the problem is ,this float property also consider the other elements and cause floating.To avoid this floating to other elements , we have to use the clear property.

 

 

 

css-clear-property

 

 

 

Let we consider with an example.Create a .html file using notepad then copy and paste the below code.I have save the file name as agh.html

 

 

<html>
<style>
.agh{
float:left;}

</style>
<body >
<div class="agh">
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
</div>

</body>
</html>

The output will be

 

css-float

  • Now I am adding another div element.Now copy and paste the below code in html file.
  • <html>
    <style>
    .agh{
    float:left;}

    </style>
    <body >
    <div class="agh">
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    </div>
    <div >
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    <h1 >Techinfoweb</h1>
    </div>
    </body>
    </html>

    Now the output will be like below.And this is the problem since we have not given any class to the next div element.But it also consider the float property in for the next div element.

 

css-without-clear-property

 

  • Here ,we are using the clear property in css.Now copy and paste the below code in html file.

<html>
<style>
.agh{
float:left;}

.ahh{clear : both;}

</style>
<body >
<div class="agh">
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
</div>
<div class=”ahh”>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
<h1 >Techinfoweb</h1>
</div>
</body>
</html>

Output will be like below,

 

css-with-clear-property

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment