Позиция relative, float принимает div из нормального потока

Как я могу предотвратить выбор div из нормального потока, но все еще используя float, например:

<div id="one">
    <div id="two"></div>
</div>

CSS

#one {
    width: 100%;
    height: auto;
}

#two {
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}

Теперь div "one" не имеет высоты, а div "two" просто выглядит так, как будто он не находится в первом div.

Ответ 1

Ahh, проблема коллапса. Там статья превосходства о плаваниях здесь http://css-tricks.com/all-about-floats/ В вашем случае я добавил бы

overflow: auto

to #one

Относительная информация приведена ниже:

Методы очистки поплавков

Если вы находитесь в ситуации, когда вы всегда знаете, что элемент будет, вы можете применить clear: both; ценность для этого элемент и идти о вашем бизнесе. Это идеальное решение, поскольку оно не требует причудливые хаки и никаких дополнительных элементов, делающих его совершенно семантическим. Конечно, вещи обычно не работают таким образом, и нам нужно иметь больше инструментов для очистки поплавков в нашей панели инструментов.

Пустой метод Div является, буквально, пустым div. <div style="clear: both;"></div>. Иногда вы увидите элемент <br />или какой-либо другой случайный элемент, но div является наиболее распространенным, потому что у него нет шаблонов по умолчанию для броузеров, нет специальной функции, и вряд ли будет в общем стиле с CSS. Этот метод презираемый семантическими пуристами, поскольку его присутствие не имеет что означает вообще страница и есть чисто для презентации. из Конечно, в строгом смысле они правы, но он выполняет свою работу право и никому не причиняет вреда.

Метод переполнения полагается на настройку свойства CSS переполнения родительского элемента. Если для этого свойства установлено автоматическое или скрытое родительский элемент, родитель будет расширяться, чтобы содержать поплавки, эффективно очищая его за последующие элементы. Этот метод может быть красиво семантический, поскольку он может не требовать дополнительных элементов. Однако, если вы обнаружите, что добавляете новый div только для его применения, это так же неземен, как пустой метод div и менее адаптируема. Также имейте в виду, что свойство переполнения не предназначено специально для очищающие поплавки. Будьте осторожны, чтобы не скрывать контент или не запускать нежелательные скроллбары.

Метод Easy Clearing использует умный псевдоселектор CSS (:after), чтобы очистить поплавки. Вместо того, чтобы устанавливать переполнение на parent, вы применяете к нему дополнительный класс, например clearfix. затем примените этот CSS:
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
Это применит небольшой контент, скрытый от просмотра, после родительский элемент, который очищает поплавок. Это не совсем целое так как дополнительный код должен использоваться для размещения на браузеры.

Ответ 2

Вы видите, что ваш дайв # просто рухнет. Добавление значения переполнения в CSS для этого элемента должно устранить эту проблему.

Ответ 3

Это должно решить вашу проблему. Попробуйте добавить его в оба DIV:

** Для тестирования вы можете добавить некоторый цвет фона.

Пример jsFiddle здесь

position: relative;
float: left;
clear: none;
display: block;