84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
三个p都设置浮动，第二个p设置了宽度100%，它应该是填满空白2的位置才对啊，为什么会等于父容器的宽度，然后挤下来。
基本上你理解錯誤了，跟浮動沒啥關係，基本上你設置寬度為百分比本來就是父元素的寬度為基準，你設定為 100% 自然是父元素的 100% ，所以也很自然被擠壓到二行，CSS 並不會說當你設置了 float 智能去判定剩餘寬度之類的，你只要想 1 和 2 如果都設置 100% 那會呈現什麼情況？就可以知道誤解在哪。
100%
CSS
float
1
2
所以，你應該是設置其為 20% 80% 才會正確地填滿父元素的寬度，但是也必須注意到 margin 和 border 之類的影響。
20%
80%
margin
border
如果想要知道 float 佈局方式的話，可以看這篇文章：margin系列之布局篇
最近正打算写一篇关于CSS中各百分比的计算参照。width的百分比计算参照其所在包含块。那么包含块如何定义？参照w3help这张图
具体参考这里：http://www.w3help.org/zh-cn/kb/008/
块状元素默认宽度会是100%，你可以把这三个p宽度用百分比表示，加起来是100%，不过那两个小正方形比如想要宽高度都是20px的话，中间的长p宽度可以用CSS3的calc(100% - 20px*2)表示，可以加上-webkit-和-moz-前缀注意兼容
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
基本上你理解錯誤了，跟浮動沒啥關係，基本上你設置寬度為百分比本來就是父元素的寬度為基準，你設定為
100%自然是父元素的100%，所以也很自然被擠壓到二行，CSS並不會說當你設置了float智能去判定剩餘寬度之類的，你只要想1和2如果都設置100%那會呈現什麼情況？就可以知道誤解在哪。所以，你應該是設置其為
20%80%才會正確地填滿父元素的寬度，但是也必須注意到margin和border之類的影響。例子
如果想要知道 float 佈局方式的話，可以看這篇文章：margin系列之布局篇
最近正打算写一篇关于CSS中各百分比的计算参照。
width的百分比计算参照其所在包含块。
那么包含块如何定义？参照w3help这张图
具体参考这里：http://www.w3help.org/zh-cn/kb/008/
块状元素默认宽度会是100%，你可以把这三个p宽度用百分比表示，加起来是100%，不过那两个小正方形比如想要宽高度都是20px的话，中间的长p宽度可以用CSS3的calc(100% - 20px*2)表示，可以加上-webkit-和-moz-前缀注意兼容