阿ken的HTML、CSS的入门指南（九）_浮动与定位感激相遇 你好 我是阿ken 布局看起来呆板、不美观，那么，如何对
感激相遇 你好 我是阿ken
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴
🌊🌈关于内容：
6.1_元素的浮动
布局看起来呆板、不美观，那么，如何对页面重新排版，这就需要为元素设置浮动。本节将对元素的浮动进行详细讲解。
6.1.1_元素的浮动属性 float
在 CSS 中，通过 float 属性来定义浮动，所谓元素的浮动是指设置了移动属性的元素会脱离标准文档流的控制。移动到其父元素中指定位置的过程。
其基本语法格式为:
选择器 {
float: 属性值;
}
float 的常用属性值：
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动(默认值) |
案例：学习 float 属性的用法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的浮动</title>
<style type="text/css">
.father {
background: #ccc; /*定义父元素的样式*/
border: 1px dashed #999;
}
.box01, .box02, .box03 { /*定义 box01、 box02、 box03 三个盒子的样式*/
height: 50px;
width: 50px;
background: #FF9;
border: 1px solid #F33;
margin: 15px;
padding: 0px 10px;
}
p { /*定义段落文本的样式*/
background: #FCF;
border: 1px dashed #F33;
padding: 0px 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>
<p>12</p>
<!--不定义float属性，float属性值都为其默认值 none-->
</body>
</html>
运行后，box01、box02、box03 及段落文本从上到下一一罗列。 可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占据页面整行。
接下来以 box01 为设置对象，对其应用左浮动样式，具体CSS代码如下：
.box01 { /*定义box01左浮动*/
float: left;
}
运行后容易看出，设置左浮动的 box01 不再受文档流控制，出现在了一个新的层次上。
在上述案例的基础上，继续为 box02 设置左浮动，具体CSS代码如下。
.box01, .box02 { /*定义 box01、box02 左浮动*/
float: left;
}
上述代码运行后，box01、box02、box03 三个盒子整齐地排列在同一行，可见通过应用 " float: left " 样式可以使 box01 和 box02 同时脱离标准文档流的控制向左漂浮。
在上述案例的基础上，继续为box03设置左浮动，具体 CSS 代码如下：
.box01, .box02, .box03 { /*定义box01、box02、box03左浮动*/
float: left;
}
上述代码运行后，box01、 box02、 box03 三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。
需要说明的是，float 的另一个属性值 " right " 在网页布局时也会经常用到，它与 " Ieft " 属性值的用法相同但方向相反。应用了 " float: right; " 样式的元素将向右侧浮动，读者要学会举一反三。
- 注意: 对元素同时定义 float 和 margin-left 或 margin-right 属性时，在 IE6 浏览器中，出现的左外边距或右外边距将是所设置的 margin-left 或 margin-right 值的两倍，这就是网页中经常出现的 " IE6 双倍边距 " 问题。
6.1.2_清除浮动 clear
在网页中，由于浮动元素不再占用原文档流的位置，使用浮动时会影响后面相邻的固定元素。
例如上述刚才那个案例中定义完 box03 ，受到其周围元素浮动的影响，产生了位置上的变化。这时如果要避免浮动对其他元素的影响，就需要清除浮动。在 CSS 中，使用 clear 属性清除浮动，其基本语法格式如下。
选择器 {
clear: 属性值;
}
clear 的常用属性值：
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
案例：< p>标记应用 clear 属性来清除浮动元素对段落文本的影响，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除元素的左浮动</title>
<style type="text/css">
.father { /*定义父元素的样式*/
background: #ccc;
border: 1px dashed #999;
}
.box01, .box02, .box03 {
/*定义box01、box02、box03三个盒子的样式*/
height: 50px;
line-height: 50px;
background: #FF9;
border: 1px solid #F33;
margin: 15px;
padding: 0px 10px;
float: left; /*定义box01、box02、box03 左浮动*/
}
p { /*定义段落文本的样式*/
background: #FCF;
border: 1px dashed #F33;
margin: 15px;
padding: 0px 10px;
clear: left; /*清除左浮动*/
/*上一行代码用于清除段落文本左侧浮动元素的影响*/
}
</style>
</head>
<body>
<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</d1v>
<p>111</p>
</div>
</body>
</html>
运行后可以看出，清除段落文本左侧的浮动后，段落文本不再受到浮动元素的影响，而是按照元素自身的默认排列方式，独占一行，排列在浮动元素 box01、 box02、box03的下面。
**需要注意的是， clear 属性只能清除元素左右两侧浮动的影响。**然而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，
案例：演示上述例子，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.father { /*没有给父元素定义高度*/
background: #ccc;
border: 1px dashed #999;
}
.box01, .box02, .box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left;
/*定义box01、box02、box03三个盒子左浮动*/
}
</style>
</head>
<body>
<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>
</body>
</html>
上述代码为 box01、box02、box03 三个子盒子定义左浮动，同时，不给其父元素设置高度。
运行后，由于受到子元素浮动的影响，没有设置高度的父元素变成了一条直线，即父元素不能自适应子元素的高度了。
我们知道子元素和父元素为嵌套关系，不存在左右位置，所以使用 clear 属性并不能清除子元素浮动对父元素的影响。对于这种情况该如何清除浮动呢?具体介绍如下。
- 方法一: 使用空标记清除浮动 _ 在浮动元素之后添加空标记，并对该标记应用 " clear:both " 样式，可清除元素浮动所产生的影响，这个空标记可以为 < div>、< p>、 < hr /> 等任何标记。 _ 案例：演示使用空标记清除浮动的方法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空标记清除浮动</title>
<style type="text/css">
.father { /*没有给父元素定义高度*/
background: #ccc;
border: lpx dashed #999;
}
.box01, .box02, .box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed 999;
margin: 15px;
padding: 0px 10px;
float: left;
/*定义box01、box02、box03三个盒子左浮动*/
}
.box04 {
clear: both;
}
/*对空标记应用clear:both;*/
</style>
</head>
<body>
<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
<div class="box04"></div>
<!--在浮动元素后添加空标记-->
</div>
</body>
</html>
在浮动元素 box01、box02、box03 之后添加 class 为 box04 的空 div ，然后对 box04 应用 " clear: both; " 样式。
父元素被其子元素撑开了，即子元素的浮动对父元素的影响已经不存在。
需要注意的是，上述方法虽然可以清除浮动， 但是在无形中增加了毫无意义的结构元素(空标记)，因此在实际工作中不建议使用。
(空标记)因此在实际工作中不建议使用。
- 方法二:使用 overflow 属性清除浮动 _ 对元素应用 " overflow: hidden; " 也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。
案例：演示使用 overflow 属性清除浮动的方法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性清除浮动</title>
<style type="text/css">
/*没有给父元素定义高度*/
.father {
background: #ccc;
border: 1px dashed #999;
overflow: hidden; /*对父元素应用overflow:hidden;*/
}
.box01, .box02, .box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left;
/*定义box01、box02、box03三个盒子左浮动*/
}
</style>
</head>
<body>
<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>
</body>
</html>
对父元素应用 " overflow: hidden; " 样式来清除子元素浮动对父元素的影响。
父元素又被其子元素撑开了，即子元素浮动对父元素的影响已经不存在。
- 方法三: 使用 after 伪对象清除浮动
使用 after 伪对象也可以清除浮动，但是该方法只适用于 IE8 及以上版本浏览器和其他非 IE 浏览器。
另外，使用 after 伪对象清除浮动时需要注意：
(1) 必须为需要清除浮动的元素伪对象设置 " height: (); " 样式，否则该元素会比其实际高度高出若干像素。
(2) 必须在伪对象中设置 content 属性，属性值可以为空，如 " content：" " ; 。
案例：演示使用 after 伪对象清楚浮动的方法。
<!doctype html>
<htm1>
<head>
<meta charset="utf-8">
<title>使用after伪对象清除浮动</title>
<style type="text/css">
.father { /*没有给父元素定义高度*/
background: #ccc;
border: 1px dashed #999;
}
.father:after { /*对父元素应用after伪对象样式*/
display: block;
clear: both;
content:"";
visibility: hidden;
height: 0;
}
.box01, .box02, .box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left; /*定义box01、box02、box03三个盒子左浮动*/
}
</style>
</head>
<body>
<div class="father">
<div class="box01">box01</d1v>
<div class="box02">box02</d1v>
<div class="box03">box03</div>
</div>
</body>
</html>
第 11 ~ 17 行代码用于为父元素应用 after 伪对象样式来清除浮动。
父元素又被其子元素撑开了，即子元素浮动对父元素的影响已经不存在。
6.2_overflow 属性
overflow 属性是 CSS 中的重要属性。当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用 overflow 属性，其基本语法格式如下。
选择器 {
overflow: 属性值;
}
overflow 的常用属性值：
| 属性值 | 描述 |
|---|---|
| visible | 内容不会被修剪，会呈现在元素框之外(默认值) |
| hidden | 溢出内容会被修剪，并且被修剪的内容是不可见的 |
| auto | 在需要时产生滚动条，即自适应所要显示的内容 |
| scroll | 溢出内容会被修剪，且浏览器会始终显示滚动条 |
案例：演示 overflow 属性的用法和效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<sty1e type="text/css">
div {
width: 100px;
height: 140px;
background: #F99;
overflow: visible; /*溢出内容呈现在元素框之外*/
}
</style>
</head>
<body>
<div>
当盒子内的元素超出盒子自身的大小时， 内容就会滥出，如果想要规范後出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式。
</div>
</body>
</html>
第11行代码通过 " overflow：visible; " 样式，定义溢出的内容不会被修剪，而呈现在元素框之外。一般而言，并没有必要设定 overflow 的属性为 visible , 除非你想覆盖它在其他地方设定的值。
运行后可知，溢出的内容不会被修剪，而呈现在元素框之外。
如果希望溢出的内容被修剪，且不可见，可将 overflow 的属性值定义为 hidden 接下来，将第 11 行代码更改如下即可，
overflow: hidden;/*溢出内容被修剪，且不可见*/
运行后可以看出，使用 " overflow: hidden " 可以将溢出内容修剪，并且被修剪的内容不可见。
另外，如果希望元素框能够多自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条，可以将 overflow 的属性值定义为 auto 。将第 11 行代码更改如下即可，
overflow: auto;/*根据需要产生活动条*/
运行后可发现，元素框的右侧产生了滚动条，拖动滚动条即可查看溢出的内容。当盒子中的内容减少时，滚动条就会消失。 值得一提的是，当定义 overflow 的属性值为 scroll 时，元素框中也会产生滚动条。将第 11 行代码更改如下即可，
overflow: scroll; /*始终显示滚动条*/
运行后可发现，元素框中出现了水平和竖直方向的滚动条。与 " overflow: auto; " 不同，当定义 " overflow: scroll; "时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「评论」 谢谢支持❤
转载自:https://juejin.cn/post/6993130330479656968