सीएसएस फ्लोट संपत्ति
उदाहरण
छवि को दाईं ओर तैरने दें:
img
{
float: right;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति निर्दिष्ट करती है कि float
क्या तत्व को बाईं ओर, दाईं ओर तैरना चाहिए या बिल्कुल नहीं।
नोट: बिल्कुल स्थित तत्व संपत्ति की उपेक्षा करते float
हैं!
नोट: एक अस्थायी तत्व के आगे के तत्व उसके चारों ओर प्रवाहित होंगे। इससे बचने के लिए, क्लियर प्रॉपर्टी या क्लियरफिक्स हैक का उपयोग करें (इस पृष्ठ के नीचे उदाहरण देखें)।
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 1 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.cssFloat = "बाएं" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
सीएसएस सिंटेक्स
float: none|left|right|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
छवि को बाईं ओर तैरने दें:
img
{
float: left;
}
उदाहरण
छवि को ठीक वहीं प्रदर्शित होने दें जहां यह पाठ में होती है (फ्लोट: कोई नहीं):
img
{
float: none;
}
उदाहरण
पैराग्राफ के पहले अक्षर को बाईं ओर तैरने दें और अक्षर को स्टाइल करें:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
उदाहरण
क्षैतिज मेनू बनाने के लिए हाइपरलिंक की सूची के साथ फ्लोट का उपयोग करें:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
उदाहरण
शीर्ष लेख, पाद लेख, बाईं सामग्री और मुख्य सामग्री के साथ मुखपृष्ठ बनाने के लिए फ्लोट का उपयोग करें:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
उदाहरण
किसी निर्दिष्ट <p> तत्व के बाईं या दाईं ओर तैरने वाले तत्वों की अनुमति न दें:
img {
float: left;
}
p.clear {
clear: both;
}
उदाहरण
यदि कोई फ़्लोटिंग तत्व युक्त तत्व से लंबा है, तो वह अपने कंटेनर के बाहर बह जाएगा। इसे "क्लियरफिक्स हैक" से ठीक करना संभव है:
.clearfix::after {
content: "";
clear: both;
display: table;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस फ्लोट
एचटीएमएल डोम संदर्भ: cssFloat संपत्ति