float到底是干什么的?

写在前面

划重点
float的真正用途不是我们平时用于将同模块下的元素并行显示,也不是为了实现将元素放在某一特殊位置时使用!
float正真的作用是!各位老爷可以去考证!float的真正作用是叫做:是元素具有包裹性,最直观的体现效果就是我们world里面常用文字环绕图片

但因为我们工作中需要达到自己想要的效果,使用float去实现,导致了float失去了原本的用途。同时float的使用不当,也给我们带来了很多的问题

float页面样式,如果是在已经有样式的页面撰写新的代码,出现位置出差,可能是因为之前页面样式浮动造成的,
这个时候可以在出错的div或者标签写上
<style="float:none"/>
即表示这个div或者标签取消浮动,保持当前浮动样式;
css在处理浮动过程中,如果在浮动元素下方的元素定义了额外的样式,但不想受到上方浮动的影响,这个时
候可以使用 style=”clear:both;” 此方法定义的结果是取消全部样式,这里对去除浮动样式的影响比较适
用;

<style type="text/css"> .a {float:left} </style>
<div class="a">1</div>
<div class="a" style="float:none">2</div>
<div class="a">3</div>

<div style="float:left">1</div>
<div style="float:left;clear:right">2</div>
<div style="float:left">3</div>
</br>
<p>----------我是分割线-------------</p>
<div style="float:left">1</div>
<div style="float:left;clear:left">2</div>
<div style="float:left">3</div>
</br>
<p>----------我是分割线-------------</p>
<div style="float:left">1</div>
<div>2</div>
<div>3</div>
<div style="float:left">4</div>
<div>5</div>

这里写图片描述

原文地址:https://www.cnblogs.com/lvgo/p/13275878.html