[js的乐趣]关于float浮动的理解（举例说明）

最新推荐文章于 2022-06-13 15:54:24 发布

summer_object

最新推荐文章于 2022-06-13 15:54:24 发布

阅读量1.2k

点赞数 3

分类专栏：布局中属性的理解文章标签： html布局中浮动属性的理解 float布局

本文链接：https://blog.csdn.net/qq_30091939/article/details/79658017

版权

布局中属性的理解专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浮动

布局时，因为一张图片迟迟放不对位置，而导致页面进程为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属性，我在下一节写成清除浮动的集中常见的方法