Tailwind CSS Clear - GeeksforGeeks

23 Mar, 2022
This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS clear property. This class is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element that is floated, it will. Basically, it is used for controlling the wrapping of content around an element.
CSS Clear Classes:
clear-left 
clear-right 
clear-both 
clear-none 
clear-left: This class is used to specify that elements are not allowed to float on the left side in relation to another element.
Syntax:
<element class="clear-left">...</element>
Example:
HTML
<!DOCTYPE html> <head>        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"  rel="stylesheet"> </head>   <body class="text-center"> <center>    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS clear Class</b>     <div class="mx-10">    <img class="float-left p-2 w-20 h-20"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <img class="float-right p-2"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <p class="text-justify clear-left">      How many times were you frustrated while looking out        for a good collection of programming/algorithm/interview       questions? What did you expect and what did you get?        This portal has been created to provide well written,        well thought and well explained solutions for selected        questions. An IIT Roorkee alumnus and founder of        GeeksforGeeks. He loves to solve programming problems       in most efficient ways. Apart from GeeksforGeeks, he        has worked with DE Shaw and Co. as a software developer        and JIIT Noida as an assistant professor.It is a good        platform to learn programming. It is an educational        website. Prepare for the Recruitment drive of product        based companies like Microsoft, Amazon, Adobe etc with       a free online placement preparation course.</p>  </center></body>   </html>
Output:
clear-right: This class is used to specify that elements are not allowed to float on the right side in relation to another element.
Syntax:
<element class="clear-right">...</element>
Example:
HTML
<!DOCTYPE html> <head>         <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"      rel="stylesheet"> </head>   <body class="text-center"> <center>    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS clear Class</b>     <div class="mx-10">    <img class="float-left p-2 w-20 h-20"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <img class="float-right p-2"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <p class="text-justify clear-right">      How many times were you frustrated while looking out        for a good collection of programming/algorithm/interview       questions? What did you expect and what did you get?        This portal has been created to provide well written,        well thought and well explained solutions for selected        questions. An IIT Roorkee alumnus and founder of        GeeksforGeeks. He loves to solve programming problems       in most efficient ways. Apart from GeeksforGeeks, he        has worked with DE Shaw and Co. as a software developer        and JIIT Noida as an assistant professor.It is a good        platform to learn programming. It is an educational        website. Prepare for the Recruitment drive of product        based companies like Microsoft, Amazon, Adobe etc with       a free online placement preparation course.</p>  </center></body>   </html>
Output:
clear-both: This class used to specify that floating elements are not allowed to float on both sides.
Syntax:
<element class="clear-both">...</element>
Example:
HTML
<!DOCTYPE html> <head>         <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center"> <center>    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS clear Class</b>     <div class="mx-10">    <img class="float-left p-2 w-20 h-20"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <img class="float-right p-2"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <p class="text-justify clear-both">      How many times were you frustrated while looking out        for a good collection of programming/algorithm/interview       questions? What did you expect and what did you get?        This portal has been created to provide well written,        well thought and well explained solutions for selected        questions. An IIT Roorkee alumnus and founder of        GeeksforGeeks. He loves to solve programming problems       in most efficient ways. Apart from GeeksforGeeks, he        has worked with DE Shaw and Co. as a software developer        and JIIT Noida as an assistant professor.It is a good        platform to learn programming. It is an educational        website. Prepare for the Recruitment drive of product        based companies like Microsoft, Amazon, Adobe etc with       a free online placement preparation course.</p>  </center></body>   </html>
Output:
clear-none: This class is used to specify the default value. It allows elements to float on both sides.
Syntax:
<element class="clear-none">...</element>
Example: 
HTML
<!DOCTYPE html> <head>        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"     rel="stylesheet"> </head>   <body class="text-center"> <center>    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS clear Class</b>     <div class="mx-10">    <img class="float-left p-2 w-20 h-20"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <img class="float-right p-2"          src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">    <p class="text-justify clear-none">      How many times were you frustrated while looking out        for a good collection of programming/algorithm/interview       questions? What did you expect and what did you get?        This portal has been created to provide well written,        well thought and well explained solutions for selected        questions. An IIT Roorkee alumnus and founder of        GeeksforGeeks. He loves to solve programming problems       in most efficient ways. Apart from GeeksforGeeks, he        has worked with DE Shaw and Co. as a software developer        and JIIT Noida as an assistant professor.It is a good        platform to learn programming. It is an educational        website. Prepare for the Recruitment drive of product        based companies like Microsoft, Amazon, Adobe etc with       a free online placement preparation course.</p>  </center></body>   </html>
Output:
Tailwind CSS
Tailwind-Layout
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?