Edit in JSFiddle

/*=========================================================================================================
    AUTHOR: JÉRÉMIE JACQUES (http://jeremiejacques.be)
    TITLE: CLEARFIX AUTO
    VERSION: 1.0
    LAST MODIFIED: Sun 7th June 2015
    DESCR: Little plugin with pure javascript to create clearfix for element in float.
    SOURCES: clearfix css : http://www.positioniseverything.net/easyclearing.html  
=========================================================================================================*/

function addClearfix(){
    
    /* create the clearfix style */
    var style = '.clearfix:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden;} .clearfix { display: inline-table; } /* Hides from IE-mac \*/ .clearfix { display: block; } /* End hide from IE-mac */ ';
    var text = document.createTextNode(style); 
    
    var baliseStyle = document.createElement('style');
        baliseStyle.setAttribute("type", "text/css");
        baliseStyle.appendChild(text);
    
    var head = document.getElementsByTagName('head')[0];
        head.appendChild(baliseStyle);

    /* get the value float of all elements in DOM */
    var DOM = document.all; /* select all elements from the DOM */
    for (var i = 0; i < DOM.length; i++) {
        var self = DOM[i]; /* save element */
        var valueFloat = window.getComputedStyle(self,null).getPropertyValue("float"); /* get the value applied for float property*/
    
        if(valueFloat != "none"){ /* if float = 'left' or 'right' add clearfix to the parent (the container)*/
            self.parentNode.classList.add("clearfix");
        };
    };
}; //end of addClearfix

/* FOR DEMO */
var demo = document.getElementById('demo');
demo.addEventListener("click", addClearfix, false);

var clear = document.getElementById('clear');
clear.addEventListener("click", clearAll, false);

function clearAll(){
    var clearfix = document.getElementsByClassName("clearfix");
    for(var i = 0; i < clearfix.length; i++){
        clearfix[i].classList.remove("clearfix");
    };
};

<!-- This is only for demo -->

<div class="container">
    <header>
        <button id="demo">Activate the plugin</button>
        <button id="clear">Clear</button>
    </header>
    
    <div class="container__section">
        <div class="content__rectangle"></div>
        <div>
            <nav>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </nav>
            <div class="right"></div>
        </div>
        
        <footer>
            <section class="footer1"></section>
            <section class="footer2"></section>
            <section class="footer3"></section>
        </footer>
    </div>
</div><!-- /container -->

<div class="bloc__white"></div>

// ONLY FOR DEMO

html, body{
	margin: 0px;
	background-color: #CCC;
}

.container{
	width:800px;
	margin: 0 auto;
	background-color: white;
	display: block;
}

header{
	height: 74px;
	width: 100%;
	background: #BFD2DE;
}


.container__section{
	height: auto;
	margin-right: 15px;
	margin-left: 15px;
}

.content__rectangle{
	background: #8EEAF9;
	height: 50px;
	width: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

nav{
	float: left;
}

ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

li{
	height: 55px;
	width: 250px;
	border: solid 2px #8EEAF9;
	margin-top: -2px;
}

li:first-child{
	margin-top: 0;
}


.right{
	float: left;
	height: 287px;
	width: 501px;
	background: #8EEAF9;
	margin-left: 15px;
	margin-bottom: 15px;
}

footer{
	height: 400px;
	width: 100%;
	background: #C8E6FA;
}

.footer1{
	height: 400px;
	width: 240px;
	background: #85BCE2;
	float: left;
	margin-right: 15px;
}

.footer2{
	height: 400px;
	width: 340px;
	background:#85BCE2;
	float: left;
	margin-right: 15px;
}

.footer3{
	height: 400px;
	width: 160px;
	background:#85BCE2;
	float: left;
	margin-bottom: 15px;
}

.bloc__white{
	height: 100px;
	width: 800px;
	background: white;
	margin: 0 auto;
	margin-top: 7px;
}