Ответ 1
Вам нужно сместить оба элемента и очистить его.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#" style="float:left;">foo</a>
<div style="clear:both;"></div>
</div>
something
</body>
</html>
Или просто поместите плавающий элемент перед нормальным элементом следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#">foo</a>
</div>
something
</body>
</html>
Краткое пояснение:
Простите мой английский и рисунок, но здесь кратко, как float и clearing работают в кросс-браузере:
Элемент можно перемещать влево или вправо. Когда у вас есть элемент, плавающий, элемент не нажимает "нормальный" контент вниз. Смотрите, почему -
Поплавок и очистка:
Легенда: оранжевый/плавающий правый, синий/плавающий влево, серые линии/прозрачный разделитель, красный цвет/граница
В этом случае у вас есть 2 элемента одного текста строки - один поплавок влево, а другой поплавок вправо. Когда плавающий, он не будет толкать содержимое вниз, а также принимать пространство. Таким образом, если вы не используете clear:both на серых линиях, содержимое ниже будет складываться вверх между двумя плавающими элементами и, следовательно, может быть не таким, каким вы хотите.
Когда вы используете clear:both ниже поплавков, содержимое под поплавками будет вытолкнуть до того уровня, который имеет самый высокий уровень поплавка. Это показано на диаграмме 2-й и 3-й части.
Только плавающий:
Легенда: оранжевый/плавающий правый, синий/нормальный контент, серые линии/линия, которая делится со следующей, красная граница/границы
Синий нормальный контент уже по умолчанию text-align: left;. Таким образом, он левый ориентирован. Вам нужно, чтобы float находился перед нормальным контентом, потому что вы говорите браузеру плавать из этой строки.
Вы должны поэкспериментировать с другими условиями, чтобы увидеть его эффект: поместить float спереди, сзади, поплавать влево и вправо, очистить оба, очистить вправо и влево.