携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
原始作用
float浮动原本的作用是实现文字环绕效果。
在子元素全为行级元素的情况中，没有定高的父元素的高度是由行级元素中最高的决定的。
<style>
img {
width: 80px;
height: 80px;
border: 1px solid red;
}
</style>
<body>
<img src="c1.png" alt="">
<div>1234567890</div>
</body>
想要实现文字环绕图片效果，将img图片添加浮动，此时图片脱离文档流，但是不会被无视，所以文字会环绕图片。
<style>
img {
width: 80px;
height: 80px;
border: 1px solid red;
float: left;
}
</style>
<body>
<img src="c1.png" alt="">
<div>1234567890</div>
</body>
浮动的应用场景
（1）浮动后面跟块级元素时：块级元素会无视浮动，直接排列，所以会重叠。
（2）浮动后面跟行级元素时：行级元素会避开浮动，所以文字环绕图片可以在图片样式中加入浮动。
（3）浮动的包裹性：效果类似display:inlineblock;，一旦让元素浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。
<div style="border: 2px solid red;">
<img src="./images/2.jpg" width="150px" height="100px">
</div>
<div style="border: 2px solid green; float: left;">
<img src="./images/2.jpg" width="150px" height="100px">
</div>
第一个父元素宽度100%，第二个父元素宽度和图片宽度一致。
（4）浮动的破坏性：父元素的高度塌陷（为了实现以前的文字环绕效果导致）。 \
注：JavaScript不能使用obj.style.float="left";写法。
IE浏览器：
obj.style.styleFloat = "left";
其他浏览器：
obj.style.cssFloat = "left";
建议：不要用浮动来堆砌布局。
