- 什么是浮动
创建浮动框，将其移动左或者右边，直到碰到左边缘或右边缘。
特性：
浮动元素会脱离标准流，
浮动的盒子不会保留白原来位置
一行内显示，顶端对齐
行内元素加了浮动元素都会具有行内块元素，无需转换，可以设置高度和宽度。 - 为什么要用浮动
网页布局本质就是摆盒子，
传统网页布局方式：
a) 通过普通流标准流（块级元素，独占一行，从上往下），行内元素（从左到右排列）
b) 定位
c) 浮动 - 为什么要清理浮动
左浮动或者右浮动，盒子会浮起来，如果父盒子未设置高度，从而可能会导致父盒子高度为0，下面盒子会往上移，所以要清除浮动 - 如果清理浮动
清除浮动造成的影响, 元素有多高，父元素就会多高
第一种：额外标签法
<div> <div>float1</div> <div>float1</div> <div style="clear:both"></div> </div>
第二种：给父元素添加overflow
<div style="overflow:hidden"> <div>float1</div> <div>float1</div> </div>
第三种：通过:after伪元素，类似额外标签法，无需增加标签，使用css即可
<div class='clearfix'> <div>float1</div> <div>float1</div> </div> <style> .clearfix::after{ content: ''; display: block; clear: both; height: 0; visibility: hidden; } <style>
第四种：双伪元素清除浮动
总结：浮动在传统布局中占有举足轻重的作用，了解浮动的原理还是非常必要的。