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.
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
- Now I am adding another div element.Now copy and paste the below code in html file.
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.<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>
- 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,
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment