Why clear : Both Is required ?



Why clear : Both  Is required ? Where we are use this Clear Both ?

Some times we want to start the content from new line . Due to the float property which we might have given for the previous div it will start from the same line  . In this case  we have to Use clear Both Property

Exmaple :
<html>
    <head>
        <style>
    .box{
        width:50px;
        height:50px;
        border:1px solid red;
        float:left;
    }
    .box1{
        width:50px;
        height:50px;
        border:1px solid blue;
        float:left;
    }
    .clear{
        clear:both;
       
        }
   
        </style>
    </head>
    <body>
        <div id= "line1">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <div class="clear"></div>
         <div id= "line2">
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
         </div>
           
    </body>
</html>


 We need 3 boxes in first line and 3 boxes in second line . Be default it will look like this




 To align this boxes we will give ""float:left"" property for the  boxes in line1 .

 If we give float property for boxes in line 1 then it will look like this .

 

Once we don't have any float property for the boxes in line 2 . So now let us give float property and see what happens . See the following pic .






 But we don't like this . We want 3 boxes in the line 1 and 3 boxes in the line 2.
 How can we solve this problem ? Here is the solution .


 Insert a new div between line 1 and line 2 with a class. ( class name you can give whatever you want . )


for this give "clear : both "

Now let us see what happens .




After the Clear Both


And that it done . Hope you understand where and why Clear property we used .

Comments

Post a Comment

Popular posts from this blog

HTML Attributes ....

Image
What is HTML Attributes and  why it is required ? We already Understood what is meant by HTML Tag . <html> is one tag , <body> is one tag, <header> is one tag . So if we want to give more information about the above mentioned tags , that moment we use Attributes . It means we can give more information by using Attributes , To understand more about HTML Attributes follow the link given here and find our more . HTML Attributes If you still not able understand how it can used and where it can be used   find out more here about the HTML Attributes here.
Read more

How to Study Web Developement Course

Image
 How to Study Web Developement Course Hi Friends, so you want to become the Web Developer or UI Developer Or Front End Developer. Right?. First thing i want to clear is Web Developer Front End Developer UI Developer all above mentioned Are same . We will do same work , It may be called with different names but  don't get confused . OK. Let us come to the Topic . How can we become UI developer . ? we know the Quality of the education in the small computer institutes . They wont pay proper salary to the instructions . Finding a good Instructor is really very difficult . I has personally experienced that . So it is really difficult to depend on a computer institute . So whats next . There are some websites offering web development course . But the Question is  can we really learn from those videos . I know about some people who can learn from the videos and online tutorials. I am not talking about those people . I am talking about the people who req...
Read more