課程
/前端開發
/HTML/CSS
/如何用CSS進行網頁布局
為什么footer那里要寫上clear:both清除浮動呢？如果不寫的話，footer顏色塊就會在head下面，這是什么原因呢？
2016-11-24
源自：如何用CSS進行網頁布局 5-2
正在回答
首先你要理解文檔流和浮動：
文檔流：自上而下，從左到右。
浮動（兩張紙疊放，最下面的是文檔流，上面的是浮動元素的位面）：脫離文檔流。
然后分析問題：
top元素的子元素head，高度100px，存在于文檔流中
main元素的子元素left，right高度600px，浮動，脫離文檔流
footer元素，高度100px，存在于文檔流中。
文檔流（底層）top元素后緊跟footer元素，并不受浮動元素影響，因為不在同一個位面。
前端coming 提問者
視頻中main元素設置了高度,所以main元素浮動不影響foot;
而這個實踐題中的main元素沒有設置高度,所以里面的元素浮動會影響footer
視頻中main相當于有骨頭撐著foot,實踐題中的main相當于沒骨頭,無法撐著footer,要footer自己處理
高山彝人
footer不清除浮動，會受影響的，也會有浮動效果
舉報
用最簡潔的案例教你布局的那些知識，這是前端工程師基本技能
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-30
首先你要理解文檔流和浮動：
文檔流：自上而下，從左到右。
浮動（兩張紙疊放，最下面的是文檔流，上面的是浮動元素的位面）：脫離文檔流。
然后分析問題：
top元素的子元素head，高度100px，存在于文檔流中
main元素的子元素left，right高度600px，浮動，脫離文檔流
footer元素，高度100px，存在于文檔流中。
文檔流（底層）top元素后緊跟footer元素，并不受浮動元素影響，因為不在同一個位面。
2016-12-20
視頻中main元素設置了高度,所以main元素浮動不影響foot;
而這個實踐題中的main元素沒有設置高度,所以里面的元素浮動會影響footer
視頻中main相當于有骨頭撐著foot,實踐題中的main相當于沒骨頭,無法撐著footer,要footer自己處理
2016-11-24
footer不清除浮動，會受影響的，也會有浮動效果