Foundation CSS Kitchen Sink Float

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Kitchen Sink Float Classes in Foundation CSS.

The Float Class is used to add the float behavior to the elements, either to the left or right of the layout. In order to clear the floats, we can use the .clearfix class to the parent element.

Foundation CSS Kitchen Sink Float Classes:

clearfix: This class can be used with the parent element to clear the float.
float-left: This class is used to float the element to the left side of the layout.
float-right: This class is used to float the element to the right side of the layout.

Syntax:

<div class="callout clearfix">
  <a class="button float-left">Left</a>
  <a class="button float-right">Right</a>
</div>

Example 1: The below example illustrates the use of Kitchen Sink Float Classes using the float-left class.

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Foundation CSS Kitchen Sink Float</title> 

    <!-- Compressed CSS -->

    <link rel="stylesheet" 

          href= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 

    <!-- Compressed JavaScript -->

    <script src= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 

    </script> 

</head> 

<body> 

    <h2 class="centre" 

        style="color:green"> 

        GeeksforGeeks 

    </h2> 

    <h5 class="centre"> 

        Kitchen Sink Float Left 

    </h5> 

    <div class="callout clearfix"> 

        <a class="button float-left success">Left</a> 

    </div> 

</body> 

</html>

Output:

Kitchen Sink float-left Class

Example 2: The below example illustrates the use of Kitchen Sink Float Classes using the float-right class.

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Foundation CSS Kitchen Sink Float</title> 

    <!-- Compressed CSS -->

    <link rel="stylesheet"

          href= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 

    <!-- Compressed JavaScript -->

    <script src= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 

    </script> 

</head> 

<body> 

    <h2 class="centre" 

        style="color:green"> 

        GeeksforGeeks 

    </h2> 

    <h5 class="centre"> 

        Kitchen Sink Float Right 

    </h5> 

    <div class="callout clearfix"> 

        <a class="button float-right success"> 

          RightGeek 

        </a>  

    </div> 

</body> 

</html>