84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
三个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 フロントエンド] Node.js クイック スタート](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-前缀注意兼容