Вам нужно пропустить оба элемента и очистить его.
<!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>
Краткое объяснение:
Прошу прощения за мой английский и рисование, но вот вкратце, как с плавающей точкой и очистка работает в кросс-браузер:
Элемент может плавать влево или вправо. Когда у вас есть плавающий элемент, элемент не перемещает «нормальное» содержимое вниз. Посмотрите, почему -
Плавающий и чистый:
Обозначения: оранжевый / всплеск справа, синий / всплеск слева, серые линии / прозрачный разделитель, красный прямоугольник / границы
В этом случае у вас есть 2 элемента текста одной строки - один с плавающей точкой слева, а другой с плавающей точкой справа. При перемещении он не будет толкать содержимое вниз, занимая место. Таким образом, если вы не используете clear:both в серых линиях, содержимое ниже будет складываться вверх между двумя плавающими элементами и, следовательно, может не соответствовать вашему желанию.
Когда вы используете clear:both под поплавками, содержимое под поплавками будет выталкиваться до тех пор, пока какой элемент поплавка не будет иметь наибольшую высоту. Это показано во 2-м и 3-м разделе диаграммы.
Float only:
Легенда: оранжевое / плавающее справа, синее / обычное содержимое, серые линии / линия, разделенная следующей, красная прямоугольная линия / границы
Стандартное содержимое синего цвета уже по умолчанию text-align: left;. Таким образом, он ориентирован на левую сторону. Вам нужно, чтобы float находился перед обычным контентом, потому что вы говорите браузеру, чтобы он перемещался из этой строки.
Вы должны поэкспериментировать с различными условиями, чтобы увидеть его эффект: поместить поплавок впереди, сзади, поплавок влево вправо, очистить оба, очистить вправо и влево.