Foundation CSS Float Classes

Foundation CSS provides float classes that allow you to control the alignment of elements within a grid or container. These classes are useful for creating layouts where elements float next to each other horizontally.

1. Float Classes

The float-left and float-right classes allow you to float elements to the left or right within their container, respectively.

Example markup for floating elements:

<div class="float-left">
  This element floats to the left.
</div>

<div class="float-right">
  This element floats to the right.
</div>

2. Clear Classes

The clearfix class is used to clear floats and prevent subsequent elements from wrapping around floated elements. It is typically applied to the parent container of floated elements.

Example markup for clearing floats:

<div class="clearfix">
  <div class="float-left">
    This element floats to the left.
  </div>
  <div class="float-right">
    This element floats to the right.
  </div>
</div>

Conclusion

Foundation CSS float classes provide a simple way to align elements horizontally within a grid or container. By using float classes, you can create flexible layouts that adapt to different screen sizes and device orientations.

Archive