jQuery: verificare se un elemento è flottato ed applicargli il clear

Applicare il clear CSS agli elementi flottati richiede spesso un intervento sulla marcatura della pagina applicando una classe speciale a determinati elementi. Con jQuery possiamo automatizzare questo processo.

Possiamo creare un semplice plugin che analizza gli elementi figli di un dato elemento per stabilire se sono flottati o meno. Se lo sono, applica una classe CSS al genitore:

(function ($) {
    $.fn.hasFloat = function (clearClass) {
        return this.each(function () {
            var element = $(this);
            var childs = element.children();
            var isFloat = false;

            childs.each(function () {
                var child = $(this);
                if (child.css('float') !== 'none') {
                    isFloat = true;
                }
            });

            if (isFloat) {
                element.addClass(clearClass);
            }
        });
    };
})(jQuery);

Esempio d'uso:

$('p').hasFloat('clear');