浮动定位与绝对定位脱离默认文档流的区别

最新推荐文章于 2022-06-07 08:21:12 发布

qq_46472106

最新推荐文章于 2022-06-07 08:21:12 发布

阅读量158

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_46472106/article/details/108931572

版权

js 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

浮动脱离文档流

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
		list-style: none;
	}
	.wrap{
		height: 200px;
		width: 200px;
		background-color: red;
		float: left;
	}
	.test{
		height: 100px;
		background-color: #ccc;
	}
	
</style>
<body>
	<div class="wrap"></div>
	<div class="test">helloword    bdkjbkjdbjkgbd冬季时刻表妇科病斯克北方的口碑</div>
</body>
</html>

结论：对于使用float：left而浮动的元素，其他盒子会无视它，从浏览器左上角开始布局，而盒子内的文本依旧会为浮动的元素让出位置

绝对定位脱离文档流

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
		list-style: none;
	}
	.wrap{
		height: 200px;
		width: 200px;
		background-color: red;
		position: absolute;
	}
	.test{
		height: 100px;
		background-color: #ccc;
	}
</style>
<body>
	<div class="wrap"></div>
	<div class="test">this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,this is a test,</div>
</body>
</html>

结论：使用绝对定位的元素，其他盒子会忽视它，而其他盒子内的文本同样也会忽视它，从左上角开始布局

qq_46472106

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动定位与绝对定位脱离默认文档流的区别

浮动脱离文档流代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> *{ margin:0; padding:0; list-style: none; } .wrap{ height: 200px; width: 200px
复制链接

扫一扫