ясно: оба затронуты внешними плавающими элементами?

Question

У меня есть 2 divs. красный является float:left (ширина: 100px)

Зеленый DIV является margin-left:101px (не плавали)

В зеленый DIV я добавил div с 2 плавающих элементов:

Таким образом, результат:

Все в порядке.

Но если я добавить div с clear:both здесь:

Он растягивается за пределы дна красной div:

Мой вопрос почему это что?

Я знаю, что clear:both должен не позволяют любому плавал на обоих и правильном месте Но под тот же контейнер элементы !!

Мы говорим о контейнере с зеленым контейнером. почему ясно: оба также рассматривают красный div? это вне его возможностей!

любая помощь?

(Im ищет причину Кроме того. - Как я могу изменить clear:both работать как желание)

(http://jsbin.com/oQEXANOK/3/edit)

P.S.

Css красного и зеленого divs является обязательным. так как сайт в настоящее время построен.

редактировать:

Я обнаружил, что если я ставлю float:left на это:

Он ведет себя так, как надо:

(что происходит Вот... ?)

Answer 1

Лучше заменить запас налево плавать: левый

Answer 2

Я не мог понять, почему это так действует, но если вы дадите поплавок влево до светло-зеленого div, все будет как и ожидалось.