ОК, сначала пара вещей:
float применяется к тому, как элемент блока визуализируется относительно текста основного документа.Float не предназначен для управления размером или положением самих реальных элементов.
Лучший способ увидеть это - пример:
<div id="A" style="float:right;background-color:#0f0;height:20px;">
my title
</div>
<div id="B" style="background-color:#00f;height:35px;">
my impressive language skills
</div>
Тогда это означает, что divA будет плавать слева от содержимого (текста) в основном потоке документа (div B находится в основном потоке).Это не влияет на физический размер div A или div B. Вы увидите, что в этом примере div B имеет ширину 100% (фоны обозначают фактический размер контейнера).Поведение Div по умолчанию занимает 100% доступной ширины его контейнера.
Div A настолько велика, насколько необходимо для отображения его содержимого, поэтому может показаться, что его поведение отличается от описанного.Это не совсем так.Поскольку div A плавает, он отображается в своем собственном виртуальном контейнере вне основного документа.Поддельный контейнер установлен на минимально возможный размер, ширина которого в основном равна 0%.Таким образом, как и любой 0% -ный континент, он растягивается столько, сколько необходимо для размещения содержимого внутри).По сути, div A имеет ширину 100% в контейнере шириной 0% (по умолчанию).
Следует также отметить, что в этом примере div A не являетсяпросто плавающий справа от контента внутри div B, но он плавающий справа относительно ВСЕГО контента в основном потоке документов.Это где div с "ясно: оба;"Атрибут css пригодится, так как он гарантирует, что плавающие объекты перестанут плавать в определенной точке документа (содержимое, которое должно быть плавающим, перемещено вниз).
Теперь, когда мы смотрим на ваш документ в частностиТо, что вы пытались эффективно сделать, это сложить 3 поплавка друг с другом ... Плавающее право B и левое B B C. Но сами контейнеры будут настолько большими, насколько они должны быть.Это становится очень сложным для управления и может быть непредсказуемым в разных браузерах ... и вы в конечном итоге пытаетесь управлять шириной, высотой, отступами и полями каждого, а также делать все остальное, просто чтобы контейнеры не перекрывались и не накапливалисьдруг на друга.
Лучшая ставка при использовании поплавков для позиционирования - убедиться, что в любом одном контейнере у вас не более одной плавающей вещи.Итак, в случае вашего документа, что-то вроде этого:
.subtitle {
padding-top: 2px;
background-color: #8FD2E3;
letter-spacing: -1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #969696;
}
img.alignleftimg {
float: left;
width: 163px;
/*margin-right: 30px;F*/
padding-right: 30px;
}
Обратите внимание, что в этом CSS только изображение настроено для плавания.Субтитры не должны плавать, потому что вы всегда хотите, чтобы они были 100% ширины относительно любого контейнера, в котором они содержатся.
Тогда для HTML:
<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<div class="section">
<p class="subtitle">Subtitle 1</p>
<p>
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
</p>
</div>
<div style="clear:both;"></div>
<div class="section">
<p class="subtitle">Subtitle 2</p>
<p>Aliquam libero. and some other stuff</p>
</div>
Обратите внимание, что мы использовали div для группировки субтитров и текста, к которому эти субтитры применяются в одном контейнере контента (разделе).Изображение установлено влево, начиная с первого раздела, поэтому весь текст будет смещен.Мы используем чистый div, чтобы убедиться, что мы прекратим плавать в этой точке, затем мы запускаем контейнер для следующего субтитра и текста.
Как и в HTML, чем меньше вы указываете, тем лучше для вас.Вместо того, чтобы управлять размерами, поплавками, позициями и прочим мусором, я рекомендую указывать как можно меньше в CSS.Это тонкое искусство, но оно окупается.
Теперь в приведенном мной примере контейнер области содержимого и изображение фактически перекрываются.Так что, если вы попробуете фоновые стили или границы и т. Д., Это может стать уродливым.Итак, это когда вы можете указать ширину и поля для управления самими контейнерами;но это проще, если вы будете осторожны, сохраняя только один элемент в любом контейнере.
Вы можете устранить перекрытие контейнеров в вышеупомянутом, добавив в этот CSS (в дополнение к тому, что уже было):
img.alignleftimg + div.section{
margin-left: 170px;
}
Это необычный селектор css, называемый селектором смежного брата ... в основном он говорит: «Применяется ко всем элементам div с именем класса« section », что также является непосредственным братом для элемента img с классом -name of "alignleftimg" .... блин! В любом случае, я просто установил поле на значение, немного превышающее ширину изображения, и перекрытие устраняется ТОЛЬКО в очень конкретном случае, который мы хотим.
Возможно, вы захотите взглянуть на элемент раздела HTML 5; но я не использовал его здесь, потому что это семантический элемент, и поэтому кросс-браузерная поддержка требует немного больше, чем просто замена тегов div на теги section.
Кроме того, я хочу отметить, что все это обсуждение - вина W3C. Нам нужны были реальные механизмы верстки, которые выполнили работу таблиц верстки HTML еще в 1994 году ... 18 лет спустя CSS-сетка все еще не была завершена и, вероятно, еще 10 лет после того, как ее поддержка в поставляемых браузерах продолжалась.