Большой отступ перед clear

fan-ky · March 25, 2012

Привет всем.

Прилагаю изображение с проблемой. В контейнере два флоата, после контейнера clear. Непонятно откуда появляется слишком большой отступ.

Где искать проблему?

Chuv · March 25, 2012

Есть подозрения что, на вашей странице кроме приведенного примера существуют другие блоки с float:left/right. Лучше всего дайте ссылку на вашу страницу или напишите код тут - http://jsfiddle.net/

psywalker · March 25, 2012

fan-ky, Создай отдельный контекст форматирования с помощью overflow:hidden;

fan-ky · March 25, 2012

fan-ky, Создай отдельный контекст форматирования с помощью overflow:hidden;

Поясни, пожалуйста, что это значит?

Chuv, я понимаю, что проблема не в том участке кода. Потому что если воссоздать этот кусок в отдельном документе, то проблемы не наблюдается.

На странице, конечно, есть другие блоки с флоатами. Заливать код не хочу так, как это реальный проект. Если есть версии, подскажите, куда копать.

NeoXidizer · March 25, 2012

firebug/любой другой инспектор и смотри, что создает отступ

fan-ky · March 25, 2012

firebug/любой другой инспектор и смотри, что создает отступ

Ничего не создает - высота у блока такая. Если prev-control next-control сделать без флоатов, высота все равно остается. Если убрать clear, то все становится нормально.

NeoXidizer · March 25, 2012

вам невозможно помочь, так как отсувствует код, который создает проблему, а предоставленный код

<!DOCTYPE html>
<html>
<head>
<style>
#content .checkout-nav-controls{margin-top:20px;width:400px;border:1px dashed #ccc;}
#content .checkout-nav-controls .prev-control{float:left;}
#content .checkout-nav-controls .next-control{float:right;}
.clear{width:100%;height:1px;overflow:hidden;clear:both;float:none;visibility:hidden;}
</style>
</head>
<body>
<div id="content">
Some text
<div class="checkout-nav-controls">

<a href="checkout_authorization.html" class="prev-control">< Назад</a>
<input type="submit" value="Далее" class="next-control" />
<div class="clear"></div>
</div>
some text<br>
some text
</div>
</body>
</html>

работает без проблем во всех браузерах

fan-ky · March 25, 2012

Есть подозрения что, на вашей странице кроме приведенного примера существуют другие блоки с float:left/right. Лучше всего дайте ссылку на вашу страницу или напишите код тут - http://jsfiddle.net/

Только что понял, что блок растягивается по высоте ровно до того места, где заканчивается левый сайдбар с меню. Что с этим делать? Может другой способ clear'a нужен?

NeoXidizer · March 25, 2012

а может просто задать height элементу, который шалит?

fan-ky · March 25, 2012

Вот код, который иллюстрирует проблему - http://jsfiddle.net/5S7mR/


<!DOCTYPE html>
<html>
<head>
<style>
	#sidebar {width: 200px; border: 1px dashed #000; float: left;}
	#content {width: 500px; margin-left: 210px; border: 1px dashed #000;}
	#content .checkout-nav-controls{margin-top:20px;width:400px;border:1px dashed #ccc;}
	#content .checkout-nav-controls .prev-control{float:left;}
	#content .checkout-nav-controls .next-control{float:right;}
	.clear{width:100%;height:1px;overflow:hidden;clear:both;float:none;visibility:hidden;}
</style>
</head>

<body>
<div id="sidebar"><br><br><br><br><br><br><br><br></div>
<div id="content">
Some text
<div class="checkout-nav-controls">

<a href="checkout_authorization.html" class="prev-control">< Назад</a>
<input type="submit" value="Далее" class="next-control" />
<div class="clear"></div>
</div>
some text<br>
some text
</div>
</body>
</html>

Высоту в моем случае задать можно, но хочется разобраться в чем же дело. А в другом случае фиксированная высота не подошла бы.

NeoXidizer · March 25, 2012

если сделать .clear таким образом

.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

то через 3D представление слоев в Firefox можно будет увидеть, что он растягивает нижний элемент на высоту сайдбара, я не знаю почему

Решения (все действуют независимо от друг-друга)

1. Задать фиксированную высоту

2. Добавить к #content атрибут float:left

3. Добавить к #content атрибут overflow:auto;

тогда все будет отображать нормально

Edited March 25, 2012 by NeoXidizer

fan-ky · March 25, 2012

fan-ky, Создай отдельный контекст форматирования с помощью overflow:hidden;

Сначала не понял, что ты имел в виду, потом сделал для блока .checkout-nav-controls {overflow:hidden;}. Все встало на свои места.

Кто-нибудь может пояснить, почему такое поведение и можно ли обойтись без overflow:hidden;?

NeoXidizer, про добавить к #content float:left - я когда только начинал верстать макет от этого почему-то отказался, не помню почему, может и не из объективных причин, но сейчас уже поздно - многое поедет, наверное . Завтра поэкспериментирую еще, напишу.

Sign In

Большой отступ перед clear

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information