Bootstrap से किसी तत्व का फ्लोट क्लियर करें

किसी तत्व का फ्लोट क्लियर करने के लिए, Bootstrap की .clearfix क्लास का उपयोग करें।

उदाहरण

निम्न कोड चलाकर किसी तत्व का फ्लोट क्लियर करें:

<!DOCTYPE html> <html>
  <head>
    <title>Bootstrap Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="clearfix" style="background: orange;border: 1px solid #000; padding: 10px;">
      <div class="pull-left" style="background: blue; color: white;">
        left
      </div>
      <div class="pull-right" style="background: blue; color:white;">
        right
      </div>
    </div>
  </body>
</html>

आधुनिक विकल्प: CSS में display: flow-root या overflow: auto का उपयोग करें; Bootstrap 5 में .clearfix अभी भी उपलब्ध है।