关于浮动
浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
| 属性 | 解释 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动 |
| inherit | 从父元素继承float属性值 |
关于浮动的例子：
有三个块级元素，设置宽高都为100px
<body>
<div class='box1'>1</div>
<div class='box2'>2</div>
<div class='box3'>3</div>
</body>1. 一个元素浮动
style{
.box1{
float: left;
}
}
此时box2和box3仍为块级元素，他们在标准文档流中占据着位置，对box1进行浮动，它从标准文档流中脱离，浮动可以理解为出现了一个于原来空间平行的空间，此时，box1脱离标准流，挡在了box2的上面，由于浮动时，文字具有自围效果，所以box2中的文字被挤压到box3盒子上。
更改box2盒子的宽度为150px
此时可以看到box1的盒子无法完全挡住box2的盒子，文字显示在box2中没有被挡住的部分。
2. 两个元素浮动时
设置box2和box3浮动
当第一个元素为块级元素，其他元素浮动时，浮动元素依旧会换行；因为脱离文档是相对元素原来所在的文档来说的。所以从上图可以看出，块级元素仍然占据原来的位置，box2,box3因为浮动而相互依靠。
但如果设置box1和box3浮动
box1相对于原来的位置进行浮动，脱离了标准文档流，此时box2占据了标准文档流左上角的位置被box1覆盖，box3进行浮动时，因为它的上一个兄弟元素box2是个块级元素，所以box3会相对box1浮动，即在box1的下方。
注意：浮动是相对于上一个兄弟元素的位置来进行浮动的。
3.不设置宽度
不设置box1的宽度，设置box2的宽度为100px，box3的宽度为150px
用文字撑开box1，浮动box1和box2
<head>
style{
.box3,.box2{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.box3{
width: 150px;
}
.box1,.box2{
float: left;
}
}
</head>
<body>
<div class='box1'>1wqeqerrtweterfgvjkfchgfdjkgfkdfdfgdsssssssfdsgfdgsghshfhgjhj1wqeqerrtweterfgvjkfchgfdjkgfkdfdfgdsssssssfdsg</div>
<div class='box2'>2</div>
<div class='box3'>3</div>
</body>结果:
当浏览器窗口较小时
当浏览器窗口较大时
所以：一般情况下不写宽度是明确需要一种灵活的宽度布局，使子元素可以撑开父元素宽度才这么做。如果没有这样的明确需求还是写上宽度为好
清除浮动
清除浮动常用有三种方法，第一种直接设置父元素的高度，第二种使用clear，第三种使用clearfix
直接设置父元素的高度
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
| 属性 | 解释 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。即应该在清除同级浮动时使用。
- clearfix
.clearfix:after {
content:"";
display: block;
clear:both;
}- 使用BFC(Block Formatting Contexts 块级格式化上下文)
只要元素满足下面任一条件即可触发 BFC 特性：
1.body 根元素
2.浮动元素：float 除 none 以外的值
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
所以可以设置上述的值，使元素变成封闭的大箱子互不影响。
上一篇： css代码添加背景图片常用代码
下一篇： docker镜像