Tailwind CSS Clear
This class acknowledges more than one worth in tailwind CSS. Every one of the properties is canvassed as in class form. It is an option in contrast to the CSS clear property. This class is utilized to indicate which side of floating elements are not permitted to float. It sets or returns the place of the element corresponding to floating items /objects. Fundamentally, it is utilized for controlling the wrapping of content around an element.
CSS Clear Classes
The classes are as follows:
- clear-left
- clear-right
- clear-both
- clear-none
clear-left
This class is utilized to determine that elements are not permitted to float on the left side corresponding to another element.
Syntax:
<element class="clear-left">...</element>
Example
Code is as follows:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>clear Class - Tailwind CSS </b>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20"
src=
"Tutorialandexample logo_image.png">
<img class="float-right p-2"
src=
"Tutorialandexample logo_image.png ">
<p class="text-justify clear-left">
How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all-around thought and very much clarified answers for chosen
questions. An IIT Roorkee former student and originator of
Tutorialandexample.
</p>
</center>
</body>
</html>
The output for the above code is:
clear-right
This class is utilized to indicate that elements are not permitted to float on the right side corresponding to another element.
Syntax:
<element class="clear-right">...</element>
Example
Code is as follows:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>clear Class - Tailwind CSS </b>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20"
src=
" Tutorialandexample logo_image.png ">
<img class="float-right p-2"
src=
" Tutorialandexample logo_image.png ">
<p class="text-justify clear-right">
How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all-around thought and very much clarified answers for chosen
questions. An IIT Roorkee former student and originator of
Tutorialandexample.
</p>
</center>
</body>
</html>
The output for the above code is:
clear-both
This class used to indicate that floating elements are not permitted to float on both sides.
Syntax:
<element class="clear-both">...</element>
Example
Code is as follows:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>clear Class - Tailwind CSS </b>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20"
src=
" Tutorialandexample logo_image.png ">
<img class="float-right p-2"
src=
" Tutorialandexample logo_image.png ">
<p class="text-justify clear-both">
How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all-around thought and very much clarified answers for chosen
questions. An IIT Roorkee former student and originator of
Tutorialandexample.
</p>
</center>
</body>
</html>
The output for the above code is:
clear-none
This class is utilized to indicate the default value. It permits elements to float on the sides.
Syntax:
<element class="clear-none">...</element>
Example
Code is as follows:
<!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-red-600 text-5xl font-bold">
Tutorial and Example
</h1>
<b>clear Class - Tailwind CSS </b>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20"
src=
" Tutorialandexample logo_image.png ">
<img class="float-right p-2"
src=
" Tutorialandexample logo_image.png ">
<p class="text-justify clear-none">
How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all-around thought and very much clarified answers for chosen
questions. An IIT Roorkee former student and originator of
Tutorialandexample.
</p>
</center>
</body>
</html>
The output for the above code is:
