{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-floats/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"13715601-f8dc-5d85-8732-02a81cbbd514","title":"Tailwind CSS Floats","slug":"/classes/tailwind-floats/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"14 May 2024\",\n  \"title\": \"Tailwind CSS Floats\",\n  \"metaTitle\": \"Tailwind Floats\",\n  \"metaDescription\": \"The tailwind float utility class allows you to control the floating behavior of elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-floats\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Floats\"), mdx(\"p\", null, \"The tailwind float utility class allows you to control the floating behavior of elements. With Tailwind's float class, you can easily float elements to the left or right within their containing elements.\"), mdx(\"h2\", null, \"Applying Tailwind Float\"), mdx(\"p\", null, \"To apply a specific Tailwind float behavior to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"float-{value}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{value}\"), \" represents the desired float behavior. Here are the common values you can use:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"float-left\"), \": Floats the element to the left side of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"float-right\"), \": Floats the element to the right side of its containing element.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"float-none\"), \": Removes any floating behavior from the element.\\nHere's an example:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div>\\n  <img src=\\\"https://devwares.com\\\" class=\\\"float-left\\\" />\\n  <p>\\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel\\n    sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius\\n    sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo\\n    autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam\\n    nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum\\n    nesciunt ipsum debitis quas aliquid. Reprehenderit, quia.\\n  </p>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    \"className\": \"rounded-t-lg overflow-hidden bg-purple-200 p-10\"\n  }, \" \\n  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"className\": \"w-32 h-32 rounded-md overflow-hidden float-left mr-3\",\n    \"src\": \"https://images.unsplash.com/photo-1687789903431-54cdeb56bb43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80\"\n  }), \"\\n   \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"text-purple-500 font-flow text-justify font-medium\"\n  }, \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,\\nmolestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum\\nnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium\\noptio, eaque rerum! Provident similique accusantium nemo autem. Veritatis\\nobcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam\\nnihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,\\ntenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,\\nquia.\")), mdx(\"p\", null, \"In the above example, a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is styled with the float-left class, which floats the element to the left side of its containing element.\"), mdx(\"h2\", null, \"Clearing Tailwind Floats\"), mdx(\"p\", null, \"When you float an element, it can affect the layout and positioning of subsequent elements. To prevent this, you may need to clear the float. Tailwind provides a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clear-{value}\"), \" utility class that you can apply to elements following a floated element to clear the float.\"), mdx(\"p\", null, \"Here are the common values you can use:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clear-left\"), \": Clears any left floats.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clear-right\"), \": Clears any right floats.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clear-both\"), \": Clears both left and right floats.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div>\\n  <img src=\\\"https://devwares.com\\\" class=\\\"float-left\\\" />\\n  <p>This element floats to the left side.</p>\\n  <div class=\\\"clear-both\\\">\\n    This element clears the float and appears below the floated element.\\n  </div>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    \"className\": \"rounded-t-lg overflow-hidden bg-yellow-200 p-10\"\n  }, \"  \\n  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"className\": \"w-32 h-32 rounded-md overflow-hidden float-left mr-3\",\n    \"src\": \"https://images.unsplash.com/photo-1687789903431-54cdeb56bb43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&h=256&q=80\"\n  }), \"\\n   \", mdx(\"p\", {\n    parentName: \"div\",\n    \"className\": \"text-yellow-500 font-flow text-justify font-medium\"\n  }, \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,\\nmolestiae quas vel.\"), mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"clear-both text-yellow-500 font-semibold text-justify\"\n  }, \"\\n  This element clears the float and appears below the floated element.\\n\")), mdx(\"h2\", null, \"Tailwind CSS FLoat Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float-right\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float: right;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float-left\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float: left;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"float: none;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=blog1\"\n  }, \"blog\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-floats","title":"Tailwind Floats","items":[{"url":"#applying-tailwind-float","title":"Applying Tailwind Float"},{"url":"#preview","title":"Preview"},{"url":"#clearing-tailwind-floats","title":"Clearing Tailwind Floats"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-css-float-class-table","title":"Tailwind CSS FLoat Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-floats.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind Floats","lastUpdated":"14 May 2024","metaDescription":"The tailwind float utility class allows you to control the floating behavior of elements."}}},"pageContext":{"id":"13715601-f8dc-5d85-8732-02a81cbbd514"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}