Очень странно перелива + поплавок поведение

Question

HTML:

<div id="float_left"> 
    DIV1 
    </div> 
    <div id="without_overflow"> 
    DIV2 
    </div> 

CSS:

#float_left{ 
     float: left; 
     width:200px; 
     background-color: red; 
    } 
    #without_overflow{ 
     width:400px; 
     height:40px; 
     background-color:green; 
    } 

http://jsfiddle.net/kgypo14y/1

В результате приведенного выше кода является то, что я ожидал. Однако, если я добавил переполнение: авто или переполнение: скрытый во втором div, результат для меня совершенно неожиданен.

http://jsfiddle.net/60nzadLz/2/

У вас есть хорошее объяснение для этого?

Спасибо

Answer 1

Тех значений overflow причиной элемента установить новый контекст форматирования блока. Поплавок никогда не может вторгаться в другой формат форматирования блока, поэтому весь элемент смещается от поплавка. От spec:

Граница коробка таблицы, блок-уровня замещаемого элемента или элемента в нормальном потоке, который устанавливает новый block formatting context (например, элемент с «переполнения», кроме «видимым») не должны перекрывать поле поля любых поплавков в том же контексте форматирования блоков, что и сам элемент. Если необходимо, реализации должны очистить упомянутый элемент, поместив его ниже любых предыдущих поплавков, но может поместить его рядом с такими поплавками, если имеется достаточное пространство.