浮动的特性
1.浮动主要用于使得div脱离标准文档流，生成多列布局
2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档流 、提升层级半级（也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围）。
注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素。
float属性
| 属性 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动 |
下面我们用三个div来设置不同情况的div浮动来通过例子来理解float以及overflow。
三个div都不浮动
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
</style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>
效果截图：
在不设置浮动的情况下，三个div块会竖着在一列显示
第一个div浮动
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
</style>
</head>
<body>
<div class="class1">块级元素1，设置浮动</div>
<div class="class2">块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动，块级元素2，没有设置浮动</div>
<div class="class3">块级元素3，没有设置浮动</div>
</body>
</html>
效果截图：
故意将第二个div块中的内容写得多点，我们可以得出下面的结论：
1.没有设置浮动的元素会填充浮动元素留下来的空间
2.浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面
3.使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围。
第二个div浮动
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
</style>
</head>
<body>
<div class="class1">块级元素1，没有设置浮动</div>
<div class="class2">块级元素2，设置浮动</div>
<div class="class3">块级元素3，没有设置浮动</div>
</body>
</html>
效果截图：
由此我们可以很明显的看出：
浮动元素不会超越其前面的元素
三个div都浮动
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
float: left
}
</style>
</head>
<body>
<div class="class1">块级元素1，设置浮动</div>
<div class="class2">块级元素2，设置浮动</div>
<div class="class3">块级元素3，设置浮动</div>
</body>
</html>
效果截图：
浏览器宽度足够时，三个div会并排排列 。
当我们发大页面时，浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。
浮动的父子关系
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrap2 {
width: 55px;
height: 90px;
border: 3px solid red;
}
.class1 {
width: 20px;
height: 40px;
background: blue;
float: left;
}
.class2 {
width: 20px;
height: 30px;
background: yellow;
float: left;
}
.class3 {
width: 20px;
height: 30px;
background: fuchsia;
float: left;
}
.class4 {
width: 20px;
height: 20px;
background: chartreuse;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
效果截图：
由此我们可以得到下面的结论：
1.浮动元素不会在其浮动方向上溢出父级的包含块 也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距 。
2.浮动元素的位置受到同级同向浮动元素的影响 也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面。
浮动影响父层盒子高度
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrap2 {
width: 55px;
border: 3px solid red;
}
.class1 {
width: 20px;
height: 40px;
background: blue;
float: left;
}
.class2 {
width: 20px;
height: 30px;
background: yellow;
float: left;
}
.class3 {
width: 20px;
height: 30px;
background: fuchsia;
float: left;
}
.class4 {
width: 20px;
height: 20px;
background: chartreuse;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
效果截图：
由此我们可以得到下面的结论：
父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷。
overflow属性
| overflow属性 | 说明 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
overflow属性的妙用：
配合着浮动父容器，解决父容器高度他塌陷的问题。
使用overflow扩展盒子高度，overflow属性会触发浏览器重新计算父元素盒子高度。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrap2 {
width: 55px;
border: 3px solid red;
overflow: hidden;
}
.class1 {
width: 20px;
height: 40px;
background: blue;
float: left;
}
.class2 {
width: 20px;
height: 30px;
background: yellow;
float: left;
}
.class3 {
width: 20px;
height: 30px;
background: fuchsia;
float: left;
}
.class4 {
width: 20px;
height: 20px;
background: chartreuse;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
效果截图：
溢出处理
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
/* 容器 */
border: solid 1px red;
height: 200px;
width: 150px;
/* overflow: visible; */
/* overflow: hidden; */
/* overflow : scroll; */
/* overflow: auto; */
overflow-x: scroll;
}
#d2{
/* 出现移除的内容*/
width: 180px;
border: solid 2px green;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">222222</div>
</div>
</body>
</html>
效果截图：
当d2的宽度超过了父级d1的宽度时，我们可以通过设置不同的overflow属性值来实现不同的解决办法，我所演示的是浏览器会显示滚动条以便查看其余内容。
清除浮动
| clear属性 | 说明 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值，允许浮动元素出现在两侧 |
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
border: solid 1px blue;
}
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left;
}
.class3 {
width: 300px;
height: 180px;
background: red;
float: left;
}
/* .clear{
clear: both;
} */
</style>
</head>
<body>
<div class="container">
<div class="class1">我是块级元素1</div>
<div class="class2">我是块级元素2</div>
<div class="class3">我是块级元素3</div>
<div class="clear">牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南</div>
</div>
</body>
</html>
没有清除两侧浮动效果截图：
把代码中的这段代码的注释去掉，来清除两侧浮动
/* .clear{
clear: both;
} */
清除两侧浮动效果截图：
可以很明显的看出：
清除两侧浮动后，有扩展父级盒子高度的作用
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
