Здравствуйте. прошу помощи. При верстке сайта появилась проблемма - блок футера сайта накладывался на блок контента. Был найдено решение добавление класса
.middle:after {
clear: both;
display: block;
content: '';
Пожалуйста объясните, простым языком , что этот класс делает и почему он решает мою проблемму. Всем кто откликнулся огромное спасибо.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Главная страница</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="/resource/css/style.css">
</head>
<body>
<div id="main">
<div id="header">
</div>
<div class="middle">
<div id="middle-content">
<div id="content">
Контент
</div>
</div>
<div id="middle-left-block">
левый блок
</div>
<div id="middle-right-block">
правый блок
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
/*----------=======Подключение шрифтов=======----------*/
@import "http://webfonts.ru/import/roboto.css";
/*================================================================*/
/*----------=======Подключение шрифтов=======----------*/
*{
margin: 0;
padding: 0;
outline: none;
}
/*================================================================*/
/*----------=======Стили body=======----------*/
body {
background: url("/images/bg.png") #EAEAEA;
cursor: default;
font-family: 'Roboto';
overflow: hidden;
}
/*================================================================*/
/*----------=======Стили ссылок а=======----------*/
a{
text-decoration: none;
}
/*================================================================*/
/*----------=======Cтраница=======----------*/
#main{
width: 1140px;
height: auto;
margin: 0 auto;
background: #f8f8f8;
border-radius: 10px;
}
/*================================================================*/
/*----------=======Header=======----------*/
#header{
width: 1140px;
height: 140px;
}
#logo{
padding: 32px 0 0 10px;
position: absolute;
}
#header_top_menu{
}
#header_top_menu ul{
list-style: none;
}
#header_top_menu ul li{
float: left;
margin-left: 10px;
}
#header_top_menu ul li a{
font-size: 22px;
color: #000000;
}
/*================================================================*/
/*----------=======Middle=======----------*/
.middle{
width: 100%;
height: auto;
position: relative;
}
.middle:after {
clear: both;
display: block;
content: '';
}
/*================================================================*/
/*----------Контент----------*/
#middle-content{
width: 100%;
float: left;
overflow: hidden;
}
#content{
padding: 0 270px 0 270px;
height: 100px;
}
/*================================================================*/
/*----------Левый блок----------*/
#middle-left-block{
float: left;
width: 250px;
margin-left: -100%;
position: relative;
background: #cdcdcd;
height: 100px;
}
/*================================================================*/
/*----------Правый блок----------*/
#middle-right-block{
float: left;
width: 250px;
margin-left: -250px;
position: relative;
background: #cdcdcd;
height: 100px;
}
/*================================================================*/
/*----------=======Footer=======----------*/
#footer{
width: 1140px;
height: 140px;
border: solid 1px black;
}
/*================================================================*/
Простой
