Using float for Three Columns Layout

Three columns layout is a common layout for modern Web design. This can be done by float.

Version

TailwindCSS 3.0

3 float-left

float000

Three columns form <nav>, <main> and <aside>.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <header>Header</header>
  <nav class="float-left w-1/5">Nav</nav>
  <main class="float-left w-3/5">Main</main>
  <aside class="float-left w-1/5">Aside</aside>
  <footer class="clear-left">Footer</footer>
</body>
</html>

float-left : float the element to the left
clear-left : clear float-left

2 float-left, 1 float-right

float000

Three columns are implemented by another method.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <header>Header</header>
  <nav class="float-left w-1/5">Nav</nav>
  <main class="float-left w-3/5">Main</main>
  <aside class="float-right w-1/5">Aside</aside>
  <footer class="clear-both">Footer</footer>
</body>
</html>

float-left : float the element to the left
float-right : float the element to the right
clear-both : clear both float-left and float-right

Conclusion

When using float for 3 columns layout, remember to use clear-left or clear-both to clear float

Reference

TailwindCSS, Floats
TailwindCSS, Clear