postcss-clearfix

PostCSS plugin that adds `fix` and `fix-legacy` attributes to the `clear` property, for self-clearing of children.

Usage no npm install needed!

<script type="module">
  import postcssClearfix from 'https://cdn.skypack.dev/postcss-clearfix';
</script>

README

PostCSS Clearfix

NPM version Build Status Dependency Status

PostCSS plugin that adds a fix attribute to the clear property, for self-clearing of children. The outputted clearfix works in IE8+.

Part of Rucksack - CSS Superpowers.

Input

.cleared {
  clear: fix;
}

Output

.cleared:after{
  content: '';
  display: block;
  clear: both;
}

Usage

postcss([ require('postcss-clearfix') ])

See PostCSS docs for examples for your environment.

Options

Property Type Default Description
display String 'block' Set the display property outputted in the ::after clearfix (eg: use 'table' to prevent collapsed margins on cleared items)

MIT © Sean King