block元素与float元素互相影响

最新推荐文章于 2020-04-12 13:08:52 发布

原创最新推荐文章于 2020-04-12 13:08:52 发布 · 590 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #bfc元素 #float元素

本文探讨了block元素与float元素组合在布局中的应用，特别是在实现自适应布局时的注意事项。通过实验发现，block元素适合做自适应变化，而float元素则适用于固定宽度的区块。最佳实践是使用inline-block与float元素组合，但文章也展示了如何仅用block元素实现类似效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

block元素与float元素组合来布局并不常见，inline-block与float元素一起做流动性布局是比较好的。以下是我使用block元素与float元素组合来布局的一些实验结论：
1、block元素如果将margin计算在内一定会独占一行，适合做自适应浏览器窗口大小的区块。而float元素默认大小刚好包裹内容，更适合固定大小的div。
2、block元素布局不会收到float元素影响，但是float元素会躲开block元素，而且连margin都会躲开。
在实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化中，最好的方法是使用一个inline-block元素与一个float元素去组合。
但是我还是尝试了一下，用block元素来进行自适应变化，并用margin来将浮动元素位置留出来。这样就必须让float元素在文档中先出现，然后block元素就能和float元素在同一行了。否则block元素将会把float元素挤到下一行。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Flexbox align 0 — starting code</title>
	<style>
		.left{
		overflow:auto;
		margin-right:200px;
		height:200px;
		background-color:blue;
		}
		.right{
		float:right;
		
		height:200px;
		background-color:red;
		}
	</style>
</head>
<body>
	<div class="right">测试文字</div>
	<div class="left"></div>
</body>
</html>

这个代码实现了上述功能，要注意在body中先写了float的右div，后写了bfc特性的左div，而不是正常的从左到右。这是因为float元素在浮动时不会去占用别的元素的margin。但是如果先渲染float元素让这个元素先把地方给占了，后渲染的bfc也无法改变float元素位置了。