五种前端布局之float布局

最新推荐文章于 2024-03-21 19:18:07 发布

小tenten

最新推荐文章于 2024-03-21 19:18:07 发布

阅读量8.3k

点赞数 6

分类专栏：前端页面布局文章标签： css

本文链接：https://blog.csdn.net/qq_39877681/article/details/109765371

版权

前端页面布局专栏收录该内容

5 篇文章 3 订阅

订阅专栏

五种前端基本布局---table布局、float布局、absolute布局、flexbox布局、grid布局

float布局特性

float 属性定义元素往哪个方向浮动。

图文环绕效果
float元素脱离了文档流，但是不脱离文本流

文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，上图中，p的区域其实是顶到了img的底下的，因为float让img脱离文档流，但是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，所以从这里也可以看出float的脱离文档流不是完全脱离。
对自身的影响：形成“块”（BFC–块格式化上下文）
.位置尽量靠上
.位置尽量靠左(右)

(1) 两个float元素宽度之和刚好等于父级元素宽度、以及所有子级元素宽度之和大于父级元素宽度的情况：

<body>
	<div style="background: red; width: 400px;">
		<span>写几个字</span>
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
	</div>
</body>

<body>
	<div style="background: red; width: 400px;">
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
		<span>写几个字</span>
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
	</div>
</body>

上面的两个代码块运行后的结果是一样的，结果如下：

在这里插入图片描述

<body>
	<div style="background: red; width: 400px;">
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
		<span>写几个字</span>
	</div>
</body>

结果如下：

在这里插入图片描述
(2)所有子级元素宽度之和小于父级元素宽度的情况：（所有情况的结果都一样）

<body>
	<div style="background: red; width: 400px;">
		<span style="background: green; float: left; width: 150px; height: 50px;">
				float
		</span>
		<span style="background: green; float: left; width: 150px; height: 50px;">
				float
		</span>
		<span>写几个字</span>
	</div>
</body>

在这里插入图片描述

对兄弟元素的影响
.上面贴非float元素（一般float元素上面贴的都是非float元素）
.旁边贴float元素（靠左，或者靠右的时候贴float元素）
.不影响其它块级元素位置
.影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）
对父级元素的影响
.从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）
.高度塌陷（因为在父级的空间里消失了，所以父级的高度有可能会塌陷，防止父级的高度塌陷的办法就是设置父级属性：overflow）

在这里插入图片描述
我们看到float元素的宽高是有100像素的，但是main的高度却是0，没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow，创建一个BFC。

在这里插入图片描述

float 的两栏布局和三栏布局

<body>
	<div style="width: 800px;height: 200px;">
		<div style="float: left;background: red;width: 200px;height: 100%;">
	　　	左
		</div>
		<div style="background: blue;margin-left: 200px;height: 100%;padding-left: 10px;">
	　　	右
		</div>
	</div>
</body>

在这里插入图片描述

<body>
	<div style="width:800px;height:200px;">
		<div style="float:left;background:red;width:200px;height:100%;">
			左
		</div>
		<div style="float:right;background:blue;width:200px;height:100%;">
			右
		</div>
		<div style="background:yellow;height:100%;">
			中
		</div>
	</div>
</body>

在这里插入图片描述

注意：如果给非float元素加上宽度，一定要记得给此元素加上margin-left/right属性，否侧会出现下面的情况（非float元素会被float元素覆盖住一部份）。

<body>
	<div style="width:800px;height:200px;">
		<div style="float:left;background:red;width:200px;height:100%;">
			左
		</div>
		<div style="float:right;background:blue;width:200px;height:100%;">
			右
		</div>
		<div style="background:yellow;width:400px;height:100%;">
			中
		</div>
	</div>
</body>

在这里插入图片描述
正确代码应该是：

<body>
	<div style="width:800px;height:200px;">
		<div style="float:left;background:red;width:200px;height:100%;">
			左
		</div>
		<div style="float:right;background:blue;width:200px;height:100%;">
			右
		</div>
		<div style="background:yellow;width:400px;margin-left: 200px;height:100%;">
			中
		</div>
	</div>
</body>

在这里插入图片描述

float布局的优缺点

缺点

脱离文档流，需要清楚浮动，*高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在对高度计算的时候会忽略浮动的元素）。

优点

兼容性好，比较简单

小tenten

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
五种前端布局之float布局

float布局float 属性定义元素往哪个方向浮动。float布局特性图文环绕效果float元素脱离了文档流，但是不脱离文本流文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，上图中，p的区域其实是顶到了img的底下的，因为float让img脱离文档流，但是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，所以从这里也可以看出float的脱离文档流不是完全脱离。对自身的影响：形成“块”（BFC–块格式化
复制链接

扫一扫