Элемент с переполнением: автоматически влияет плавающий элемент

Question

Может кто-нибудь объяснить мне, почему переполнение имеет следующий эффект.

В jsfiddle ниже у меня есть Div, плавающий влево с установленными шириной и высотой. Далее у меня есть контент Div. Вы можете думать об этом как о левой навигации и содержании макета сайта.

Внутри контента у меня есть два Div, которые идентичны, кроме одного переполнен: auto другой нет. Тот, с переполнением: auto в настоящее время учитывает плавающий div и сокращает его ширину, чтобы не конфликтовать с ним. Если другой просто сохраняет свою полную ширину и работает под плавающим div.

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

http://jsfiddle.net/9bEDj/1/

Может кто-нибудь уточнить это для меня и объяснить, почему это поведение, или если он на самом деле не должен делать это и это странно!

Answer 1

Вот невероятное описание магии плавания / переполнения
http://colinaarts.com/articles/the-magic-of-overflow-hidden/

Предполагается, что элементы с переполнением, отличным от видимого, должны относиться к поплавкам, поэтому вы можете использовать его, не вызывая размытости

Answer 2

Это происходит потому, что настройка overflow устанавливает новый контекст форматирования блока, и контексты форматирования блока не перекрывают поплавки .