Как правильно использовать clear:both;?
0
В уроке 55 делалалась страница с фильмами и там была новая команда "clear:"both;" "
Когда прописываю я ее у меня кнопка какимто образом улетает в самый низ за блок дива. Блок называется filmboard
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Проект Небеса</title>
<meta name = "description" content="Сайт"/>
<meta name = "keyword" content="Сайт, Интересный сайт"/>
<link rel="stylesheet" href="../asets\css\style.css">
</head>
<body>
<div calss = "main"> <!-- Шапка -->
<div class="header">
<div class="logo">
<a href="../index.html">
<img src="../asets/img/icon.png">
</a>
<div class="logotext">
<h1><a href="../index.html">Проект Небеса</a></h1>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="../index.html">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг фильмов</a></li>
<li><a href="../dop/contact.html">Связь</a></li>
</ul>
</div>
</div>
</div>
<div class="content"> <!-- Правый бок -->
<div class="barcontainer">
<div class="bar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_from">
<input type="search" name="search_field" placeholder="Ваш запрос"/>
<input type="submit" class="btn" value="найти"/>
</form>
</div>
<div class="bar">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_fild" placeholder="Логин">
<hr>
<input type="password" name="password_fild" placeholder="Пароль">
<input type="submit" class="btn" value="Вход">
<div class="lables">
<span><a href="#">Забыли пароль?</a></span> | <span><a href="#">Регестрация</a></span>
</div>
</form>
</div>
<div class="bar">
<h2>Новости</h2>
<p>Идет создание сайта)</p>
<div class= news>
<a href="#">Подробнее</a>
</div>
</div>
<div class="bar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><span class=rating_buton><a href="#">Во все тяжки</a></span> <span class= rating> 8.1</span></li>
</ul>
</div>
</div>
<div class="filmboard">
<div class="filmboardinfo">
<img src="../asets/img/kakiaystal.jpg">
<p>Понравиться отцу своей невесты — задача не из легких. С этой проблемой сталкивается и китайский парень Пен, когда отправляется в Москву за своей любовью — Ирой, даже не подозревая, какой кошмар его ждет. Ведь ее отец Анатолий совсем не готов отдавать свою дочь первому встречному, и у него на этот случай припасен свой план по избавлению…
Однако, отцу невесты и жениху придется научиться уважать друг друга, если они хотят сохранить рядом с собой девушку, которую любят больше всего на свете.</p>
<div class="botton"><a href="#">Смотреть</a></div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<snap class= global><a href="../index.html">Главная</a></snap> |
<a href="#">Фильмы</a> |
<a href="#">Сариалы</a> |
<a href="#">Рейтинг</a> |
<a href="../dop/contact.html">Связь</a>
</p>
<snap class= footerdown><p>Проект Небеса</p></snap>
<p>2017</p>
</div>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
input[type="text"], input[type="password"], input[type="search"] {
color: #848484;
width: 60%;
padding: 8px;
}
input, textarea{
outline: none; /*Убераем линии у строки для ввода данных*/
border:none;
border: solid 1px #f2f2f2;
}
h2{
font: normal 170% "century gothic", arial;
margin: 0 0 2px 0;
font-size: 140%;
padding: 0px 0 0px 0;
color: #CB53FA;
}
body{
font-size: 1em;
}
p{
padding: 0 0 6px 0;
line-height: 1.2em;
}
ul li{
padding: 0 0 20px 0;
line-height: 1.7em;
}
.header{
background: black;
height: 177px;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.main, .logo img, .menubar, .content, .footer{
margin-left: auto;
margin-right: auto;
}
.logo img{
padding:0 0 0 50%;
height: 100px;
width: 100px;
min-width: 100px;
}
.logotext h1, .logotext h1 a {
font: normal 150% "century gothic", arial sans-serif;
padding: 0 0 0 26%;
color: #0489B1;
letter-spacing: -0.01em; /*растояние между символами */
text-decoration: none; /*дикорация тега "a"*/
}
.menubar {
width: 900px;
height: 46px;
}
ul.menu{
float: right; /* Прижимаем ul к правому краю */
}
ul.menu li{
float: left; /*Прижал "li" к левому краю. Тем самым распримил текст по оси x*/
padding: 0 0 0 9px;
list-style: none; /*"none" убирает точки рядом стоящие с словом*/
margin: 1px 2px 0 0;
}
ul.menu li a{
font: normal 100% "trebuchet ms", sans-serif;
display: block;
height: 20px;
padding: 6px 35px 5px 28px;
color: rgb(255, 255, 255);
text-decoration: none;
}
ul.menu .selected a{
color: rgb(0, 200, 150);
}
ul.menu .selected a:hover{
color:#01DF74;
}
ul.menu li a:hover{
color: rgb(0, 200, 150);
}
.content {
width: 880px;
overflow: hidden; /*Обрезает все что выходит за рамки задданого размера*/
margin: 0 auto 0 auto;
background-color: white;
}
.barcontainer{
float: right;
width: 224px;
}
.bar{
float:right;
width: 222px;
padding:5%;
margin:0 0 0 0;
border:solid 1px #D8D8D8;
background-color:#D8D8D8;
}
.btn{
padding: 8px;
background-color: white;
cursor:pointer; /*Добавляем эффект наведения на сслку кнопке "Смена курсора при наведение"*/
}
.bar h2{
color: #136cb2;
}
.bar hr {
width: 68%; /* ширина линии */
height: 2px; /* высота толщина линии */
background: #000000; /* фон цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
}
.lables a{
font-size: 0.9em;
margin-top: 3%;
margin-left: 2%;
text-decoration: none;
color: rgb(0, 0 , 0);
}
.lables a:hover{
color: rgb(0, 200, 150);
}
.news a{
text-decoration: none;
color: rgb(20, 200, 100);
}
.news a:hover{
color:#01DF74;
}
.bar ul{
margin: 0;
}
.bar ul, li, a{
list-style: none;
margin: 0;
}
.rating_buton a{
text-decoration: none;
color: rgb(0, 0, 0);
}
.rating_buton a:hover{
color:#585858;
}
.rating{
float: right;
color: rgb(255, 0, 0);
}
.content-film{
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
.content-film h1{
color: black;
}
.content-film a{
text-decoration: none;
}
.content-film a img{
border: 3px dashed #01DF74;
width: 25%;
}
.content-film a img:hover{
border: 3px solid #01DF74;
}
.posts a{
color: #136cb2;
}
.podrobnie a{
color: rgb(20, 200, 100);
}
.podrobnie a:hover{
color: #58FA58;
}
.info-film{
margin-top: 2%;
margin-bottom: 4%;
margin-left: 15%;
}
.lable1{
padding: 0 0 0 30%;
}
.lable, .lable1{
font-size: 1.2em;
}
.value1{
font-size: 1em;
font: 90% arial;
color: #000000;
}
.value{
font-size: 1em;
color: rgb(0, 200, 150);
}
.info-film hr{
border: solid 1px #000000;
width: 74%;
}
.discription1 h2{
color: #0489B1;
padding: 8px 0 8px 35%;
}
.content-film hr{
border: solid 1px #000000;
}
.discription{
margin: 0 0 15% 0;
font: 100% arial;
}
.reviews1 h2{
padding: 0 0 0 50%;
color: rgb(0, 200, 150);
}
.reviews{
margin: 0 0 4% 0;
font-size: 0.9em;
height: 20%;
}
.reviews .reviews-name{
background-color: rgb(0, 200, 150);
color: #000000;
padding: 6px 0 0 15px;
border-radius:100px 100px 0 0;
}
.reviews .reviews-text{
padding: 2% 0 2% 15px;
background-color:#F2F2F2;
}
.send{
margin: 0 0 4% 0;
}
.send input[type="text"]{
width: 98%;
}
.send textarea{
width: 624px;
height: 200px;
}
.send input[type="submit"]{
border-radius:70px;
background-color:#0489B1;
padding: 3%;
color: #000000;
cursor: pointer;
}
.send input[type="submit"]:hover{
background-color:#0080FF;
}
.send input[type="text"], .send textarea{
margin: 0 0 2% 0;
border-color: rgb(0, 200, 150);
background-color:#F2F2F2;
}
.span-texth1{
margin: 0 0 1% 0;
}
.contact{
margin: 1% 0 0 0;
}
.contact input[type="text"]{
width: 67%;
margin: 0 0 9px 0;
}
.contact textarea{
width: 68.8%;
height: 200px;
}
.contact input[type="text"], .contact textarea{
border-color: rgb(0, 200, 150);
color: #000000;
}
.contact input[type="text"]:focus, .contact textarea:focus{
background-color:#F2F2F2;
}
.contact input[type="submit"]{
border-radius:15px;
background-color:#0489B1;
padding: 1%;
color: #000000;
cursor: pointer;
}
.contact input[type="submit"]:hover{
background-color:#0080FF;
}
.filmboardinfo img{
float: left;
width: 15%;
height: 15%;
margin: 6px 2% 0 0;
}
.filmboard{
padding: 10px 0 40px 10px;
background-color:#F2F2F2;
width: 600px;
height: 150px;
margin: 2% 0 0 0;
border-radius: 20px;
}
.filmboard p{
margin: 0 2% 0 0;
}
.botton{
background-color: #0489B1;
padding: 1%;
width: 11%;
height: 2%;
border-radius: 5px;
float: right;
clear: both;
}
.botton a{
text-decoration: none;
color: #000000;
}
.posts .posts-content{
font-size: 0.8em;
}
.footer{
width: 100%;
height: 100px;
padding: 28px 0 5px 0;
text-align: center;
background-color: black;
color: white;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.footer a{
color: white;
text-decoration: none;
}
.footer a:hover{
color: rgb(0, 200, 150);
}
.global a{
color: rgb(0, 200, 150);
}
.global a:hover{
color:#01DF74;
}
.footerdown{
color: #0489B1;
}
.footer p{
padding: 0 0 5px 0;
}
.posts hr{
margin: 20px 0 10px 0;
border: solid 1px #0489B1
}