Элементы здесь появляются на свет в естественном виде, сверху вниз. Причем каждый элемент занимает всю ширину родительского окна, даже если он по ширине намного меньше, и имеется место по горизонтали, на той же широте для других блоков. По умолчанию, занимать это место нельзя, таковы правила.
Но все-таки часто бывает нужно, чтобы определенный элемент вышел из основного потока и аккуратно подвинулся влево или вправо, освобождая пространство справа или слева для других блочных элементов.
Для таких целей используется свойство float, а элементы, обладающие данным свойством называются плавающими.
Немного теории по свойству float.
| Значение | Пояснение |
|---|---|
| float:left; |  Элемент уплывает влево. Обратите внимание, что имеется принципиальная разница между данным значением и значением none по умолчанию - см ниже. |
| float:right; | Элемент уплывает вправо. |
| float:none; | Элемент не является плавающим. Он будет показан там, где он и находится в тексте. Это значение по умолчанию. |
| float:inherit; | Значение свойства float будет унаследовано от родительского элемента. |
If you're involved in an internet marketing business, then you've probably already come face-to-face with your #1 enemy - "Time Wasting".
Если вы вовлечены в бизнес, связанный с Интернетом, тогда, возможно, вы столкнулись лицу к лицу с вашим главным врагом, имя которого - "Пустая Трата Времени".
What you need to know is that "Time Is Money". And this applies even more to the online world, than in regular business.
Вы должны знать, что "Время - Деньги". И это правило еще больше соответствует деятельности в Интернете, чем в обычном бизнесе.
You see, anyone can become an online entrepreneur. It doesn't involve start-up capital or expensive equipment to start. A low grade PC and a net connection is all you need.
Вы видите, любой может стать интернет-предпринимателем. Это не требует большого стартового капитала или какого-то сложного оборудования. Слабенький персональный компьютер и выход в Интернет - вот и все, что вам нужно.
And since cash isn't really a barrier, time-management has become all the more critical. Your challenge for success is simply to get more done - in less time.
И так как деньги не являются критичным фактором, управление временем (тайм менеджмент) становится наиболее важным моментом. Ваш шанс на успех определяется простым правилом: делай больше и делай быстрее.
So what are the greatest online time wasters and what can you do to avoid them?
Итак, какие же величайшие растратчики времени в Интернете и что вы можете сделать, чтобы избежать их?
float:right;
В результате будильник уплыл вправо, что в общем-то логически понятно и вполне объяснимо. Удивительно другое: последующие за уплывшей картинкой блочные элементы не упираются в "пловца", а проходят сквозь него. А вот контент последующих блочных элементов не проходит сквозь плавающий элемент, а упирается в него.
Поскольку мы старательно обвели обводкой (outline) каждый элемент, этот неожиданный для любого новичка эффект хорошо виден. Логически сразу понять это трудно, эффект входит в противоречие с тем, что мы наблюдаем в реальном мире. Это как будто мы протискиваем банку с огурцами в закрытый холодильник, при этом сама банка успешно пролезает (частично), но сами огурцы с рассолом полностью остаются за пределами холодильника.
Это один из тех эффектов CSS, к которым надо просто привыкнуть. А привыкнув, уже будете удивляться, что же тут казалось таким странным?
Свойство float часто используется для позиционирования больших системообразующих блоков.
Рассмотрим схему типичного позиционирования таких блоков.
Для примеров выше мы использовали следующие стили -
.body_css_030 {
font: 12px Verdana, sans-serif;
color: #333333;
outline: 1px solid #FAA21A;
}
.pic1_css_030 {
outline: 1px solid #F77777;
float: right;
margin: 20px;
}
.p_css_030 {
outline: 1px solid #777777;
padding: 5px;
margin: 10px;
}
.p_css_030:lang(en) {
background-color: #F0FFFF;
}
.p_css_030:lang(ru) {
background-color: #FFF0FF;
}
.body_css_030_2 {
font: 10px Verdana, sans-serif;
color: #111111;
background-color: #777777;
outline: 1px solid #FAA21A;
width:96%;
/* height:280px; */
margin: 0 auto;
}
.head_css_030_2 {
font: 32px Verdana, sans-serif;
color: #111111;
background-color: #F8AC18;
text-align:center;
outline: 0px solid #909090;
width:100%;
height:40px;
margin: 0px auto;
padding: 0;
}
.menu_css_030_2 {
font: 12px Verdana, sans-serif;
color: #111111;
background-color: #EBEBEB;
text-align:center;
outline: 0px solid #909090;
width:100%;
height:20px;
margin: 0px auto;
padding: 0;
}
.nav_css_030_2 {
font: 12px Verdana, sans-serif;
color: #111111;
background-color: #0BEBFB;
text-align:center;
outline: 0px solid #909090;
width:20%;
height:160px;
margin: 0px auto;
padding: 0;
}
.nav_css_030_2_left {
float: left;
}
.nav_css_030_2_right {
float: right;
}
.central_css_030_2 {
font: 12px Verdana, sans-serif;
color: #111111;
background-color: #FB0B9B;
text-align:center;
outline: 0px solid #909090;
height:160px;
margin: 0px auto;
padding: 0;
}
.footer_css_030_2 {
font: 12px Verdana, sans-serif;
color: #FFFF00;
background-color: #111111;
text-align:center;
outline: 0px solid #909090;
height:20px;
margin: 0px auto;
padding: 0;
}
css_030_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_030_001.zip ← скачайте пример, чтобы установить на свой сайт...
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
