浮动

浮动：float：left 元素靠左靠上
float：right 元素靠右靠上
浮动盒子在排列时，会避开常规流块盒子，
常规流块盒子在排列时无视浮动盒子

行盒在排列时，会避开浮动元素
如果文字直接写在块盒当中，浏览器会自动给文字加上一个行盒，（该行盒叫做匿名行盒）包裹文字
文字环绕效果，将图片元素浮动，就可以使文字环绕

当元素浮动后，元素一定会变成块盒
浮动元素的包含快，和常规流一样，是父元素的内容盒

盒子尺寸：宽度为auto时，适应内容宽度
高度为auto时，与常规流一样，适应内容高度
margin为auto时，为0

高度坍塌：常规流盒子在计算高度时，会忽视里面的浮动盒子
解决方式：清除浮动
可以给父元素加一个伪元素

.clearfix::after{
content: '';
display: block;
clear: both;
}