2023年6月20日发(作者：)

关于width=100%时会出现滚动条的情况我们常常会看到⼀些⽹页永远都是充满屏幕的，不会出现⽔平⽅向的滚动条，那这些灵活的页⾯布局是怎样做到的呢？⽽有些出现⽔平⽅向的滚动条的页⾯⼜是因为什么原因呢？例：1.出现⽔平⽅向滚动条的页⾯及代码：

效果如下：这是⼀个横向两列布局的页⾯，从图中我们可以看到当⼦元素box1和box2运⽤了浮动⽽其⽗元素box没有设置浮动时，⼦元素会把⽗元素给覆盖掉，这是因为什么呢？这是因为⽗元素没有设置浮动，⽽两个⼦元素的宽度加起来之后⼤于⽗元素，导致⽗元素的⾼度⽆法撑开，⼦元素内容溢出。ok，我们现在对⽗元素进⾏清除浮动看看（注意这时⽔平⽅向的滚动条已经出现）：2.清除浮动之后的页⾯及代码：
效果如下：我们看到清除浮动之后，⽗元素得以重现，但是这时⽔平⽅向上的滚动条仍然存在，注意我们再来看没有滚动条时是什么样的情况：3.没有⽔平滚动条的页⾯及代码：
效果如下： 通过对⽐2和3我们可以发现，当⽗元素的宽度width=100%时，页⾯就会出现⽔平⽅向上的滚动条，这是为什么呢？要弄清楚这个问题，我们⾸先要知道这个width=100%的基准是谁，也就是说它是相对于谁⽽⾔的?它的参照物是谁？根据CSS的相关知识我们知道，当⼦元素没有设置样式时，⼦元素会继承其⽗元素的样式，⽽在本例当中，⽗元素box的⽗元素⼜是谁呢？答案是标签，或者也可以理解为当前浏览器的可视窗⼝，所以它的宽度是整个浏览器窗⼝的宽度，⽽浏览器具有放⼤缩⼩的功能，所以它就会把⼦元素的宽度设置为当前可见区域的宽度，所以就会出现滚动条的情况，当滑动滚动条时，⼦元素的内容就会随着浏览器窗⼝的可视宽度进⾏显⽰，所以如果不想出现滚动条的情况，那么就需要在设置width值时，⼀定要设置⼀个不为100%的值。（如果需要⽤滚动条来显⽰溢出的话，那么可以把overflow设置为auto或者scroll）

2023年6月20日发(作者：)

关于width=100%时会出现滚动条的情况我们常常会看到⼀些⽹页永远都是充满屏幕的，不会出现⽔平⽅向的滚动条，那这些灵活的页⾯布局是怎样做到的呢？⽽有些出现⽔平⽅向的滚动条的页⾯⼜是因为什么原因呢？例：1.出现⽔平⽅向滚动条的页⾯及代码：

效果如下：这是⼀个横向两列布局的页⾯，从图中我们可以看到当⼦元素box1和box2运⽤了浮动⽽其⽗元素box没有设置浮动时，⼦元素会把⽗元素给覆盖掉，这是因为什么呢？这是因为⽗元素没有设置浮动，⽽两个⼦元素的宽度加起来之后⼤于⽗元素，导致⽗元素的⾼度⽆法撑开，⼦元素内容溢出。ok，我们现在对⽗元素进⾏清除浮动看看（注意这时⽔平⽅向的滚动条已经出现）：2.清除浮动之后的页⾯及代码：
效果如下：我们看到清除浮动之后，⽗元素得以重现，但是这时⽔平⽅向上的滚动条仍然存在，注意我们再来看没有滚动条时是什么样的情况：3.没有⽔平滚动条的页⾯及代码：
效果如下： 通过对⽐2和3我们可以发现，当⽗元素的宽度width=100%时，页⾯就会出现⽔平⽅向上的滚动条，这是为什么呢？要弄清楚这个问题，我们⾸先要知道这个width=100%的基准是谁，也就是说它是相对于谁⽽⾔的?它的参照物是谁？根据CSS的相关知识我们知道，当⼦元素没有设置样式时，⼦元素会继承其⽗元素的样式，⽽在本例当中，⽗元素box的⽗元素⼜是谁呢？答案是标签，或者也可以理解为当前浏览器的可视窗⼝，所以它的宽度是整个浏览器窗⼝的宽度，⽽浏览器具有放⼤缩⼩的功能，所以它就会把⼦元素的宽度设置为当前可见区域的宽度，所以就会出现滚动条的情况，当滑动滚动条时，⼦元素的内容就会随着浏览器窗⼝的可视宽度进⾏显⽰，所以如果不想出现滚动条的情况，那么就需要在设置width值时，⼀定要设置⼀个不为100%的值。（如果需要⽤滚动条来显⽰溢出的话，那么可以把overflow设置为auto或者scroll）