关于float遮挡框内容绕流的问题

帅气的阿尔文

于 2021-07-05 12:54:28 发布

阅读量181

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_55439408/article/details/118487467

版权

在学习float知识的过程中，大家都知道float会脱离正常的文档流的问题，如下有两个div,div1和div2，如果对div1设置左浮动，div1会脱离正常的文档流进行悬浮，div2的框会顺着正常的文档流上移，由此就会觉得div1会将div2遮挡住，但是最终的显示结果是

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text</title>
<style>
	#div1{
		width: 200px;
		height: 100px;
		background-color: red;
		float: left;
	}
	#div2{
		width: 100px;
		height: 200px;
		background-color: blue;
	}
	
</style>
</head>

<body>
<div id="div1">
	大家好我是div1
</div>

<div id="div2">
	大家好我是div2
</div>
</body>
</html>

这个是最终的显示结果，我在学习之前也认为应该的结果是div2里面的文文字会悬浮在div1之上，但是最终结果是div1的框会悬浮在div2之上，对div2进行一定程度的遮挡，但是div2里面的内容对对整个div框进行绕流，这个一定要记住。当然如果是需要有内容遮挡需求的话，那就需要用到定位来实现了，而不是浮动。