浮动
标准文档流组成
- 块级元素（block）
- h1~h6 、p 、 div 、列表
- 内联元素（inline）
- span 、 a 、 img 、 strong...
注意：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
浮动(float)
float属性
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值；元素不浮动，并会显示在其文本中出现的位置 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
float: left;
}
</style>
</head>
<body>
<img src="../resources/image/sunrise.webp" width="160" height="120" alt="美丽风景">
<h1>浮动的测试，第一次测试</h1>
<p>学习CSS的过程很辛苦</p>
</body>
</html>
当添加多张图片时，我们来看一看他们是怎么排列的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
float: left;
}
</style>
</head>
<body>
<img src="../resources/image/sunrise.webp" width="320" height="240" alt="美丽风景">
<img src="../resources/image/1.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/2.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/3.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/4.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/5.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/6.jpg" width="320" height="240" alt="美丽风景">
</body>
</html>
当调整窗口时，图片会自动调整位置
边框塌陷(clear)
作用：
浮动元素脱离标准文档流
清除浮动
| 属性值 | 说明 |
|---|---|
| left | 在左侧不允许出现浮动元素 |
| right | 在右侧不允许出现浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
float: left;
margin: 20px;
}
#one{
clear: both;
margin-bottom: 2px;
}
</style>
</head>
<body>
<h1>图片</h1>
<img src="../resources/image/sunrise.webp" width="320" height="240" alt="美丽风景">
<img src="../resources/image/1.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/2.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/3.jpg" width="320" height="240" alt="美丽风景">
<h2 id="one">第二行</h2>
<img src="../resources/image/4.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/5.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/6.jpg" width="320" height="240" alt="美丽风景">
<img src="../resources/image/7.jpg" width="320" height="240" alt="美丽风景">
</body>
</html>
如果这里不添加clear，就会造成，文字出现在图片右侧的情况
display属性
| 属性值 | 说明 |
|---|---|
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| inline-block | 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 |
| none | 设置元素不会被显示 |
块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{display:inline-block}
</style>
</head>
<body>
<p>这两个段落生成内联盒子,和它的结果</p>
<p>这两个元素之间没有距离。</p>
</body>
</html>
块元素排在一起
有两种方法：
inline-block
float
溢出处理
Overflow属性
| 属性值 | 说明 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
background: blue;
width: 200px;
height: 200px;
overflow: scroll;
}
.two{
background: green;
width: 200px;
height: 200px;
overflow: hidden;
}
.three{
background: red;
width: 200px;
height: 200px;
overflow: auto;
}
.four{
background: yellow;
width: 200px;
height: 200px;
overflow: visible;
}
</style>
</head>
<body>
<h2>overflow: scroll</h2>
<div class="one">杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田。</div>
<h2>overflow: hidden</h2>
<div class="two">杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田。</div>
<h2>overflow: auto</h2>
<div class="three">杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田。</div>
<h2>overflow: visible</h2>
<div class="four">杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田。</div>
</body>
</html>
解决父级边框塌陷的方法
- 浮动元素后面加空div
- 简单，空div会造成HTML代码冗余
- 设置父元素的高度
- 简单，元素固定高会降低扩展性
- 父级添加overflow属性
- 简单，下拉列表框的场景不能用
- 父级添加伪类after
- 写法比上面稍微复杂一点，但是没有副作用，推荐使用
inline-block和float的区别
- display:inline-block
- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
- 位置方向不可控制，会解析空格
- IE 6、IE 7上不支持
- float
- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
- float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父 级上添加清除浮动的样式
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
