HTML + CSS 连载 | 58 - CSS 元素浮动
一、认识浮动
CSS 浮动属性 float 可以指定一个元素沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它。
float 属性最初只用于在一段文本内浮动图像，实现文字环绕的效果，由于早期的 CSS 标准中并没有提供好的左右布局方案，所以在很长一段时间里面 float 成为网页多列布局最常用的工具。
与绝对定位一样，浮动也会让元素脱离标准流。
通过给 float 属性设置值，来让元素产生浮动，常用取值如下：
none：不浮动，默认值left：向左浮动right：向右浮动
二、浮动的规则
浮动规则一：元素一旦浮动后，就脱离标准流
元素浮动脱离标准流后会朝左或者朝右移动，直到自己的边界紧贴着包含块（一般是指父元素）或者其他浮动元素的边界位置，由于定位元素也是脱离标准流的，定位元素会层叠在浮动元素上面。
创建一个 HMTL 文件，包含两个 div 元素，并分别设置不同的背景颜色，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item1 {
background-color: #f00;
}
.item2 {
background-color: #ff0;
}
</style>
</head>
<body>
<div class="item1">1</div>
<div class="item2">2</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
div 为块级元素会独占一行，接下来给 div.item1 添加浮动，具体代码如下：
.item1 {
float: left;
background-color: #f00;
}
设置 div.item1 左浮动后，效果如下：
div.item1 会脱离标准流，但是 div.item2 还没有脱离标准流，所以 div.item1 的宽度由内容来决定并且会紧贴 div.item2 的边界。
接下来我们可以将浮动改为固定定位，并且设置左上的偏移都为 0，具体代码如下：
body {
margin: 0;
padding: 0;
}
.item1 {
/* float: left; */
position: fixed;
top: 0;
left: 0;
background-color: #0f0;
}
设置了固定定位后 div.item1 会覆盖在 div.item2 上，这就是定位和浮动的区别，浮动是会紧贴着 div.item2 的边界。
我们可以将 div.item1 往下移动 10px，具体代码如下：
.item1 {
/* float: left; */
position: fixed;
top: 10px;
left: 0;
background-color: #0f0;
}
可以看到 div.item1 确实盖在了 div.itme2 上
我们可以注释掉 div.item1 的定位并再取消浮动的注释，同时给 div.item2 添加上右浮动，具体代码如下：
.item1 {
float: left;
/* position: fixed;
top: 10px;
left: 0;*/
background-color: #0f0;
}
.item2 {
float: left;
}
设置浮动之后，就不会再占据整行的宽度，并且浮动元素会紧贴边界：
设置 div.item2 为右浮动：
.item2 {
float: right;
}
两个 div 元素都会紧贴自己包含块（body）的边界，效果如下：
当然我们也可以将 div.item1 和 div.item2 放到一个 div.box 中：
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
并设置 div.box 的宽高以及居中：
.box {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
}
刷新浏览器，效果如下：
可以看到两个浮动元素 div.item1 和 div.item2 都是紧贴着自己的包含块 div.box 的边界的。
浮动规则二：浮动元素不能超过包含块的边界
如果元素是向左（右）浮动，浮动元素的左（右）边界不能超过包含块的左（右）边界。
拷贝上一个 HTML 文件，并给 div.box 添加一个内边距：
.box {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
padding: 10px;
}
在浏览器中打开 HTML 页面，效果如下：
浮动元素 div.item1 和 div.item2 没有超出包含块的左右边界位置。
转载自:https://juejin.cn/post/7307171953868832805