javascript - 關(guān)于使用overflow: hidden來清除浮動(dòng)的疑問
問題描述
正常情況下，給浮動(dòng)的父元素設(shè)置overflow:hidden;就可以清楚浮動(dòng)，但是我發(fā)現(xiàn)被浮動(dòng)元素的父元素是body時(shí)，給body設(shè)置overflow：hidden，是無法清除浮動(dòng)的，有人說是body不屬于普通流，所以無效，有誰能解釋下嗎？
感謝：CRIMX借用王大陸的一句話：
你這種人不是大神，就是走在成為大神的路上。
問題解答
回答1：這是因?yàn)椴]有產(chǎn)生新的 BFC
產(chǎn)生新 BFC 的一個(gè)條件：
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).
為什么對(duì) <body> 設(shè)置 overflow 會(huì)擴(kuò)散到 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’.
相關(guān)文章：
1. angular.js - 輸入郵箱地址之后， 如何使其自動(dòng)在末尾添加分號(hào)？2. 管理員信息修改時(shí)的密碼問題3. javascript - JS 里面的 delete object.key 到底刪除了什么？4. android - RxJava 中有根據(jù)條件執(zhí)行不同函數(shù)的操作符嗎？5. mysql - 電商如何存儲(chǔ)營業(yè)額數(shù)據(jù)6. javascript - 后臺(tái)管理系統(tǒng)左側(cè)折疊導(dǎo)航欄數(shù)據(jù)較多，怎么樣直接通過搜索去定位到具體某一個(gè)菜單項(xiàng)位置，并展開當(dāng)前菜單7. javascript - html5的data屬性怎么指定一個(gè)function函數(shù)呢？8. javascript - 如何使用nodejs 將.html 文件轉(zhuǎn)化成canvas9. html5 - 為什么使使用vue cli 腳手架，post-css 沒有自動(dòng)對(duì)css3屬性自動(dòng)添加瀏覽器前綴呢？10. java如何生成token？
網(wǎng)公網(wǎng)安備