[js的乐趣]关于float浮动的理解（举例说明）
程序员文章站
2022-05-29 15:13:25
...
浮动
布局时，因为一张图片迟迟放不对位置，而导致页面进程为0呢？
到底用display：inline-block；还是用浮动float来解决呢？
是不是因为浮动，导致下面的同级盒子不在应有的位置位置上面呢？
在写导航栏的时候，如何让每个li都在一行显示？
什么是浮动？
float属性定义了元素在哪个方向浮动
float：left/right/none/inherit
一、浮动也就脱离了标准文档流
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
举个生活中的例子：人们在地面上排队，当其得到一个飞行技能（也就是浮动float），那么便可以不受地面的约束。
而且他原本的位置（占位）也就不存在了，后面的人会向前进一位
举个例子：
<style type="text/css">
.one{margin: 100px;}
.on01 { width: 50px;
height: 100px;
background-color: #008000;
float: left; }
.on02{ width: 50px;
height: 50px;
background-color: #ccc;}
.on03{ width: 50px;
height: 50px;
background-color: #7FFFD4; }
</style>
</head>
<body>
<div class="one">
<div class="on01">01</div>
<div class="on02">02</div>
<div class="on03">03</div>
</div>
</body>这是三个不浮动的div：
给01div盒子一个float:left;
因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了02和03盒子，使02、03盒子 从视图中消失，但是里面的文本不会因为
给三个div盒子都设置左浮动
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
那么如何让02和03 都在01的右侧且并排显示呢？
可以在02和03盒子加一个父盒子box,让box左浮动02和03 不浮动（代码如下）
.box{ float: left;
}
.on02{ width: 50px;
height: 50px;
background-color: #ccc;
}.on03{ width: 50px;
height: 50px;
background-color: #7FFFD4;
float: left; }
<div class="one">
<div class="on01">01</div>
<div class="box">
<div class="on02">02</div>
<div class="on03">03</div>
</div>
</div>
这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。
css给我们另一个属性来解决这种因浮动而产生烦恼 clear属性，我在下一节写成清除浮动的集中常见的方法