1. float属性
1.1 浮动的定义及理解
任何元素浮动后都会变成块级元素。
CSS的float使元素脱离文档流（指元素在文档中不占位置了），按照指定的方向发生移动，直到它碰到父元素的边框或者另一个浮动元素的边框为止（浮动不会重叠）。浮动最初是用于图像环绕文字，所以尽管元素设置浮动后不占据位置，但文字仍能环绕在浮动元素周围，而不是被浮动元素覆盖。
① 浮动元素的外边缘碰到包含框的情况：
框一向右浮动，直至它碰到了父元素的边框
② 浮动元素碰到另一个浮动元素的边框的情况：
框一、框二、框三均为向左浮动元素
1.2 float属性的取值
| 值 | 说明 |
| left | 向左浮动 |
| right | 向右浮动 |
| none | 默认值，不浮动 |
1.3 清除浮动带来的影响
如果父元素不设置高度，浮动元素会使得父元素高度塌陷，故需要清除浮动带来的负面效果。
<!--父元素塌陷-->
<head>
<style>
.box1{
background-color: deepskyblue;
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="box2"></div>
</body>如果没有浮动，原先的父元素的高度由子元素的内容撑开，故会显示背景颜色；但添加浮动后，子元素脱离了文档流，此时父元素中没有内容将其撑开，故背景颜色消失。
清除浮动的方法：
① 浮动元素的父元素设置高度：
该方法的缺点是，必须能够确认父元素的高度。
<head>
<style>
.box1{
background-color: deepskyblue;
height: 200px;/*为父元素设置高度*/
}
.one{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: plum;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2{
width: 100%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="one"></div>
最低0.47元/天 解锁文章
2166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
