Float क्या है
Float utilities elements को left या right की ओर push करती हैं और text को इनके आर-पार wrap होने देती हैं।
In this page:
Syntax
<div class="float-start">left</div>
<div class="float-end">right</div>
<div class="clearfix"></div>Float
.float-start और .float-end elements float करते हैं, .float-none reset करता है, और .float-md-end जैसे breakpoint versions exist करते हैं। Floated elements normal flow छोड़ देते हैं, इसलिए parent पर .clearfix से इन्हें clear करें।
Modern layouts के लिए floats से flexbox या grid prefer करें।
Note:
floated children के container में clearfix add करें ताकि यह इन्हें wrap करे।
उदाहरण: Float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="clearfix border p-2">
<div class="float-start bg-info-subtle p-2 me-2">float-start</div>
<div class="float-end bg-warning-subtle p-2 ms-2">float-end</div>
<p>Text wraps between the floated boxes and the clearfix parent contains them all.</p>
</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- clearfix भूल जाना
- पूरे-page layouts के लिए floats इस्तेमाल करना
- Bootstrap 4 से float-left इस्तेमाल करना
चैप्टर सारांश
- float-start और float-end
- float-none reset करता है
- Breakpoint versions exist करते हैं
- Parent पर clearfix इस्तेमाल करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: