三栏式布局设置浮动问题

Question

三个div都设置浮动，第二个div设置了宽度100%，它应该是填满空白2的位置才对啊，为什么会等于父容器的宽度，然后挤下来。

Answer 1

基本上你理解錯誤了，跟浮動沒啥關係，基本上你設置寬度為百分比本來就是父元素的寬度為基準，你設定為 100%自然是父元素的 100% ，所以也很自然被擠壓到二行，CSS 並不會說當你設置了 float 智能去判定剩餘寬度之類的，你只要想 1 和 2 如果都設置 100% 那會呈現什麼情況？就可以知道誤解在哪。

所以，你應該是設置其為 20% 80% 才會正確地填滿父元素的寬度，但是也必須注意到 margin 和 border 之類的影響。

例子

如果想要知道 float 佈局方式的話，可以看這篇文章：margin系列之布局篇