Float создает перекрывающиеся divs

У меня есть два divs (один внутри другого), и я столкнулся с проблемой, когда я плаваю внутри внутри «слева». Проблема в том, что внешний div не расширяет свою высоту, чтобы соответствовать тексту внутри внутреннего div. Поскольку это, вероятно, довольно запутанно, я попытаюсь объяснить это с помощью некоторого кода.Float создает перекрывающиеся divs

HTML:

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS:

#div2 { 
    float: left; 
    width: 10px; 
}

Я весьма надеюсь, что когда проверял это на самом деле показывает мою проблему, как у меня не было возможности проверить это. Мой реальный код имеет больше свойств, которые я буду создавать, если это необходимо.

источник

2009-06-21 PF1

Вам необходимо использовать ясность. Вставьте следующее после вашего плавающего div и внутри содержащего div.

<div class="clear"></div>

И добавьте следующий стиль:

.clear { clear:both; }

Пример:

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

источник

2009-06-21 03:49:03 Sampson

Спасибо Jonathan: Это сработало отлично! – PF1

вы гений :) его работа –

Это не исправление. Это просто понятно. Вам просто нужно очистить плавающий :) –

(третий раз за сегодня :-)) дают внешнее переполнение DIV: скрытый;
и ширина.

источник

2009-06-21 03:49:55

Действительно? Так жаль об этом, правда. Я думаю, что мне нужно работать над изменением моих поисковых запросов, чтобы лучше выразить то, что другие люди называют той же проблемой. – PF1

... или auto –

Добавление ширины к элементу, чтобы убедиться, что оно растет по высоте, делает CSS-код трудным для чтения, я сомневаюсь, что это разумное решение. Решение zoom: 1 кажется лучше, я думаю, но это, вероятно, не будет действительным w3c css. Переполнение: скрытое также приятное решение, но делает ваш css также трудным для чтения, потому что речь идет не о переполнении, чтобы скрыть контент, а также использовать элемент, чтобы увеличить размер элемента. – Michiel

Если вы не хотите, чтобы добавить дополнительную разметку для HTML или добавить ширину вашего внешнего DIV, вы можете использовать:

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

источник

2009-06-21 11:45:12 Emily

Я думал о переполнении: скрытый работал в IE6 тоже? – alex

Nope. Чтобы очистить float для IE6, вам нужно вызвать hasLayout. Это делается путем предоставления элементу позиции, поплавка, отображения, ширины, высоты или масштабирования. Давать ширину или высоту является наиболее распространенным способом вызова hasLayout, но иногда вы не хотите указывать измерение, а масштаб является самым прозрачным. См. HasLayout.net для получения дополнительной информации. – Emily

А - Я добавляю отображение: блок, как правило, все, что содержит плавающие элементы. – alex

Может быть под рукой, чтобы отметить, что также хорошо известно код clearfix от positioniseverything, которая написана специально для этой проблемы и, вероятно, наиболее надежна и проста в применении в любой ситуации. CSS выглядит следующим образом:

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

Для того, чтобы использовать его в вашей ситуации вы могли бы сделать следующее:

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

источник

2009-06-21 17:47:18 Michiel

высота: 1% решила всю мою проблему. Не знаю, почему. Не могли бы вы объяснить, что он делает в контексте серии плавающих элементов с двумя или более неплавающими элементами на хвосте? – Emanegux

Хотя описанные выше решения должны работать, я полагаю, что это стоит отметить, что есть один волшебный трюк, которого я еще не видел (в этой теме).

Просто поплавок # div1 слева. Когда вы плаваете родительский элемент, он автоматически очистит дочерний элемент - довольно полезный, действительно. Вы могли бы построить весь макет плавающих стеков, а затем в конце концов сделать один окончательный, и он будет достаточно надежным.

источник

2009-06-22 08:26:18

К сожалению, поплавки сильно затягивают. Лучше использовать их экономно и посыпать нечетное переполнение: hidden; – GlennG

Float создает перекрывающиеся divs

ответ

Смежные вопросы