Materialize: the class .clearfix not work well

[ilovezy]

hei, I got this DOM structer

<form name="todoForm" class="card-panel clearfix">
        <div class="input-field">
            <i class="fa fa-pencil-square-o prefix"></i>
            <input type="text" name="todoNote" placeholder="todo something">
        </div>
        <div class="right">
            <button class="btn waves-effect">
                add
            </button>
            <button class="btn waves-effect red lighten-2">clean</button>
            <button class="btn waves-effect green">confess</button>
        </div>
    </form>

and it looks like this

I think the class .clearfix just clear: both

I look into bootstrap cleafix, It looks like this

.clearfix:before,
.clearfix:after {
        display: table;
        content: " ";
}

.clearfix:after {
    clear: both;
}

and works good

will you update this class

[acburst]

Well the point of a clearfix is not to put it on the container. A clearfix is supposed to be an empty div after your content you want to give height that is floated content.

<form name="todoForm" class="card-panel">
        <div class="input-field">
            <i class="fa fa-pencil-square-o prefix"></i>
            <input type="text" name="todoNote" placeholder="todo something">
        </div>
        <div class="right">
            <button class="btn waves-effect">
                add
            </button>
            <button class="btn waves-effect red lighten-2">clean</button>
            <button class="btn waves-effect green">confess</button>
        </div>
        <div class="clearfix"></div>
    </form>

That should work as intended.

[sfcgeorge]

That isn't semantic at all, adding an empty div shouldn't be the answer. The Bootstrap way is semantic because no junk html needs to be added and the styling stays in the stylesheet (just adding a class).