javascript - 关于使用overflow: hidden来清除浮动的疑问

查看:106
本文介绍了javascript - 关于使用overflow: hidden来清除浮动的疑问的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

正常情况下,给浮动的父元素设置overflow:hidden;就可以清楚浮动,但是我发现被浮动元素的父元素是body时,给body设置overflow:hidden,是无法清除浮动的,有人说是body不属于普通流,所以无效,有谁能解释下吗?

感谢:CRIMX
借用王大陆的一句话:

你这种人不是大神,就是走在成为大神的路上。

解决方案

这是因为并没有产生新的 BFC

产生新 BFC 的一个条件:

Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' (except if the 'overflow' property's value has been propagated to the viewport).

为什么对 <body> 设置 overflow 会扩散到 viewport:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

这篇关于javascript - 关于使用overflow: hidden来清除浮动的疑问的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆