overflow
这里overflow是对 你从未见过的最全input元素讲解！！！ 的补充
overflow 属性用于控制内容溢出元素框时显示的方式。
注意： overflow 属性只工作于指定高度的块元素上。
在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
滚动条设置可以看该篇博客，非常详细，我就不进行二次创作了😀： 【CSS】关于滚动条样式
取消滚动条
当内容中用到overflow-scroll，就会产生丑恶的滚动条，为了除掉这个滚动条，程序员要写的代码还真的不少，不同浏览器兼容不一样，代码也不一样！
这里菜鸟是引用的该篇博客：
感谢：从入门到入土777的 去除overflow-scroll滚动条
第一种
这里直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
/* 都无用 */
/* -ms-overflow-style: none; */
/* scrollbar-width: none; */
}
.max-box {
width: 500px;
height: 400px;
overflow: scroll;
/* 有用 */
/* scrollbar-width: none; */
}
.max-box::-webkit-scrollbar {
/* 有用，和上面二选一即可 */
display: none;
}
.box {
width: 400px;
height: 600px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="max-box">
<h2>
阿富汗卡号放大倍数方面回去分解看病难没办法马拉松部分哦哈办法弥补方面开发部分漫步覅
</h2>
<div class="box"></div>
</div>
</body>
</html>
不过菜鸟没有IE浏览器，所以不知道最后一个是否可行，希望有IE的读者可以尝试并留下结果在品论区！
overflow：hidden 解决
菜鸟还看见了一种解决方案，但是事实证明并无效果：
2023/03/31，今天菜鸟回来读了一读，发现这里有问题，其实是可以的，需要给aa加入高宽，且小于max-box！
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aa{
overflow: hidden;
display: inline-block;
}
.max-box{
width: 500px;
height: 400px;
overflow: scroll;
}
.box{
width: 400px;
height: 600px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="aa">
<div class="max-box">
<h2>阿富汗卡号放大倍数方面·回去分解看病难没办法马拉松部分哦哈办法弥补方面开发部分漫步覅</h2>
<div class="box"></div>
</div>
</div>
</body>
</html>
运行结果：
padding解决
还有一种通过设置padding的方式来解决，这篇博客也没说清楚，如下：
菜鸟自己实现的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aa{
width: 500px;
height: 400px;
overflow: hidden;
}
.max-box{
/* box-sizing: border-box; */
width: 100%;
height: 100%;
overflow: scroll;
padding-bottom: 15px;
padding-right: 15px;
}
.box{
width: 400px;
height: 600px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="aa">
<div class="max-box">
<h2>阿富汗卡号放大倍数方面·回去分解看病难没办法马拉松部分哦哈办法弥补方面开发部分漫步覅</h2>
<div class="box"></div>
</div>
</div>
</body>
</html>
注意：
这里千万不要给滚动的元素加上 box-sizing: border-box; 这样会让其padding往内层挤，而不是往外层，而导致无用，所以就算 box-sizing: border-box; 很好，但是也不能用！
不知道 box-sizing: border-box; 的读者可以移步： 重学前端 样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列 ）（第四天）
float
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
浮动元素是半脱离文档流的，不像position:absolute、fixed; 完全脱离文档流，无法覆盖文字，float设计也是为了产生图片的文字缠绕！
HTML中的文档流和文本流：juejin.cn/post/684490…
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它；浮动元素之前的元素将不会受到影响。
实例：
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
这是一些文本。这是一些文本。这是一些文本1。
这是一些文本。这是一些文本。这是一些文本2。
这是一些文本。这是一些文本。这是一些文本3。
这是一些文本。这是一些文本。这是一些文本4。
这是一些文本。这是一些文本。这是一些文本5。
这是一些文本。这是一些文本。这是一些文本6。
<br/>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本7。
这是一些文本。这是一些文本。这是一些文本8。
这是一些文本。这是一些文本。这是一些文本9。
这是一些文本。这是一些文本。这是一些文本10。
这是一些文本。这是一些文本。这是一些文本11。
这是一些文本。这是一些文本。这是一些文本12。
这是一些文本。这是一些文本。这是一些文本13。
这是一些文本。这是一些文本。这是一些文本14。
这是一些文本。这是一些文本。这是一些文本15。
这是一些文本。这是一些文本。这是一些文本16。
</p>
</body>
运行结果：
注意 ： 彼此相邻的浮动元素，如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性，clear 属性指定元素两侧不能出现浮动元素。
注意：
哪边浮动，那么就清除哪边，如果不清楚，可以直接使用both！
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:left;
/*clear:right就不行*/
/*clear:both;*/
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
代码测试： 菜鸟教程
扩展
如果 .text_line 去掉 clear，然后放大网页，会出现该现象：
为什么第二行会跑到前两张图片的右边？
因为 .text_line 在float元素之后，float是半脱离文档流，虽然 .text_line 占据了其空间，但是 float 并不能覆盖文字，图片所以把文字挤到了右边！
那图片为什么不接着加到后面？而是显示文字？
这是因为后面的空间不足以再放一张图片，把 .thumbnail 的 width设置为60px时，会产生这样的效果（再次说明了float无法覆盖文字）：
