CSS Layout – Float And Clear Property In CSS In Hindi

CSS

float And clear Property In CSS In Hindi – Is Tutorial Me CSS float And clear Property Ko Complete Explain Kiya Gya Hai, Is Tutorial Me Ham Dekhenge Ki float And clear Property Kya Hoti Hai , float And clear Property Kha Use Ki Jati Hai , float And clear Property Kyo Use Ki Jati Hai Etc.

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

(adsbygoogle = window.adsbygoogle || []).push({});

CSS float And clear Property in Hindi

Float Property CSS Ki Bahut Important Property Mani Jati Hai , Iske Bina Aap Koi Website Design Hi Nhi Kar Skte, Kyoki Float Property Web Page Ko Organize Krne Me Help Krti Hai |

Float Property Smjhne Se Phle Ek Example Lete Hai ,Aur Ye Smjhne Ki Koshish Krte Hai Ki Float Property Ki Jarurut Kyo Hoti Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
	img{
    	width:170px;
        height:170px;
    }
</style>
</head>
<body>

<h2>Master Programing CSS Float Tutorial </h2>

<div class="container">
	<img src="https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 		imperdiet, nulla et dictum interdum, nisi
  lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
  auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
  lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum 
  nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec 
  vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
  nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Donec vitae dui eget tellus gravida venenatis. 
  Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris 
  quis diam velit.Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. 
  Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
  
</div>
</body>
</html>

Output :

Output Me Hamne Dekha Ki Ye Page Bahut Hi Kharab Dikh Rha Hai |

Ab Agr Ham Isi Example Me Image Ke Liye Float Property Use Kr ke Dekhte Hai –

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.container{
	border : 3px solid black;
    padding : 10px;
}
	img{
    	width:170px;
        height:170px;
        float : right;
    }
</style>
</head>
<body>

<h2>Master Programing CSS Float Tutorial </h2>

<div class="container">
	<img src="https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 		imperdiet, nulla et dictum interdum, nisi
  lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
  auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
  lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum 
  nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec 
  vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
  nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Donec vitae dui eget tellus gravida venenatis. 
  Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris 
  quis diam velit.Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. 
  Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
  
</div>
</body>
</html>

Output :

Jab Hmne Image Ke Liye float : right ; Property Set Ki To Image Right Side Me Set Ho Gyi Aur Div Ke Content Se Wrap Ho Gyi Hai , Jisse Web Page Bahut Hi Attractive Dikh Rha Hai |

To Ab Ham Samajh Chuke Hai Ki Float Property Ek Web Page Me Kya Kar Skti Hai |

Float Ki Help Se Ham Kisi Element Ko Left Ya Right Me Set Kar Skte Hai Aur Jab Ham Kisi Element Par Float Property Set Krte Hai To Vo Element Apne Aas-Pas Wale Content Se Wrap Ho Jata Hai ,Jaise Ki Example Me Image Ke Charo Taraf Content A Gya |

Float Property In CSS In Hindi

Float Property Ki Value Nimn Ho Skti Hai –

  • right
  • left
  • none

float : right In CSS In Hindi

float : right ; Property Set Krke Ham Kisi Element Ko Uske Container Me Right Side Me Float Kr Skte Hai | Jaisa Ki Pichhle Example Me Hamne Image Ko Right Side Float Kiya Tha |

float : left In CSS In Hindi

float : left ; Property Set Krke Ham Kisi Element Ko Uske Container Me Left Side Me Float Kr Skte Hai |

Example : Pichhle Example Me Hi right Ko left Se Replace Kar Ke Dekhte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
.container{
	border :  3px solid black;
    padding : 10px;
}
	img{
    	width:170px;
        height:170px;
        float : left;
        margin-right : 15px;
    }
</style>
</head>
<body>

<h2>Master Programing CSS Float Tutorial </h2>

<div class="container">
	<img src="https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
  lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
  auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
  lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum 
  nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec 
  vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
  nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Donec vitae dui eget tellus gravida venenatis. 
  Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris 
  quis diam velit.Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. 
  Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
  
</div>
</body>
</html>

Output :

float : none In CSS In Hindi

Yah Float Property Ki Default Value Hoti Hai | Jaisa Ki Hmne Pahle Hi Example Me Dekha Tha , Vo float : none Property Ka Example Tha |

Clear Property In CSS In Hindi

Aapne Dekha Hoga Ki Float Property Set Kiye Hue Element Par Kbhi-Kbhi Koi Dusra Element A Jata Hai Use Overlap Krne Lag Jata Hai |

Example : Do div Lete Hai, Ek div1 Ke Liye float right Set Krte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 150px;
  height: 150px;
  margin: 10px;
  border: 3px solid black;
}

.div2 {
  border: 2px solid red;
}

</style>
</head>
<body>

<h2>Without clear Property</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left,
  the text in div2 flows around div1.
</div>
</body>
</html>

Output :

Hmne Output Me Dekha Ki div2 div1 Ke Upr Ja Rha Hai | Is Problem Ko Solve Krne Ke Liye Ham div2 Me clear Property Set Kr Ke Dekhte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 150px;
  height: 150px;
  margin: 10px;
  border: 3px solid black;
}

.div2 {
  border: 2px solid red;
  clear : left;
}

</style>
</head>
<body>

<h2>With clear Property</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</body>
</html>

Output :

Jab Hmne Last Wale Example Me div2 Ke Liye Float Left Set Kiya To, Dekha Ki Dono div Separate Dikh Rhe Hai |

Matalab Clear Property Yah Btati Hai Ki Koi Element, Clear Property Wale Element Ke Kis Taraf Float Ho Skta Hai Ya Float Nhi Ho Skta | Jaisa Ki Name Se Pta Chl Rha Ki Clear Property Float Property Ko Saaf Kar Deti Hai |

Clear Property Ki Value Nimn Ho Skti Hai –

  • none – Dono Side Float Ho Skte Hai , Yah Clear Property Ki Default Value Hoti Hai
  • left – Left Side Me Floating Allow Nhi Hai
  • right – Right Side Me Floating Allow Nhi Hai
  • both – Dono Side Floating Allow Nhi Hai

Note : Ydi Float Ki Value Right Set Ki Gyi Hai ,To Clear Ki Value Bhi Right Set Krni Chahiye , Jisse Float Wala Element Vhi Show Hoga Jha Use Float Kiya Gya Tha Aur Clear Property Wala Element Web Page Me Flaot Wale Element Ki Niche Show Hoga |

The clearfix Hack In CSS In Hindi

Ise Ek Example Se Smjhte Hai

Example : Man Lo Ek Div Hai Jisme Hmne , Ek Paragraph Aur Ek Image Set Ki Hui Hai , Image Ko Float Right Set Kiya Hua Hai |

<!DOCTYPE html>
<html>
<head>
<style>
div{
  border: 3px solid #000;
  padding: 5px;
}

.img1 {
  float: right;
}
</style>
</head>
<body>

<h2>Clearfix</h2>

<div>
  <img class="img1" src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200" >
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>

</body>
</html>

Output :

Hmne Dekha Ki Image Div Se Overflow Ho Rhi Hai |

Aisi Problem Ko Solve Krne Ke Liye Container Element Me overflow : auto; Property Set Ki Jati Hai |

Example : div Me overflow : auto Set Kr Dete Hai

<!DOCTYPE html>
<html>
<head>
<style>
div{
  border: 3px solid #000;
  padding: 5px;
  overflow: auto;
}

.img1 {
  float: right;
}

</style>
</head>
<body>

<h2>Clearfix</h2>

<div>
  <img class="img1" src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200" >
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>

</body>
</html>

Output :

To overflow : auto ; Set Krne Se Ab Page Proper Dikh Rha Hai |

(adsbygoogle = window.adsbygoogle || []).push({});

Float Examples

Ab Ham Float Property Ko Proper Samajh Chuke Hai , To Ab Float Property Ko Apply Krne Ka Time Hai

Kuchh Examples Dekhete Hai Jinme Float Property Ka Use Kiya Gya Ho

Navigation Menu

Jab Ham List Par Float Property Apply Krte Hai To Hme Horzontal Menu Milta Hai

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: green;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  font-family : verdana;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: blue;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#service">Services</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#contact">Contact Us</a></li>
</ul>

</body>
</html>

Output :

Web Layout Example

Jaisa Ki Hmne Apko Btaya Tha Ki Float Property Web Layout Bnane Me Use Ki Jati Hai ,To Ek Example Me Dekhte Hai Ki Kis Tarike Se Use Ki Jati Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.header, .footer {
  background-color: skyblue;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Master Programing</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>Learn Python</li>
      <li>Learn C++</li>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The Master Programing</h1>
    <p>Master Programing Par Aap Hindi Me Programing Learn Kr Skte Hai</p>
    <p>Master Programing Par Aap Ekdm Easy Way Me Tutorials Learn Kr Skte Hai</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

Output :

Leave a Reply

Your email address will not be published. Required fields are marked *