float和position:absolute脱离文本流的区别

最新推荐文章于 2024-07-09 15:21:50 发布

paediatrician

最新推荐文章于 2024-07-09 15:21:50 发布

阅读量6.2k

点赞数 4

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/paediatrician/article/details/52583653

版权

学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行；

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

float时：

<html>
	<head>
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0}
			.box1{width:100px;background-color:red;float:left}	
			.box2{width:100px;background-color:gray;float:right}	
			.box3{background-color: aqua;margin: 0 110;}		
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</body>
</html>

显示效果如下：可见，box3的margin是box3边框到浏览器的距离，box2的位置并没有收到float的box1 box2的影响。

当把box3样式改为：.box3{background-color: aqua;}时，可以看到box3中间的文本依然为box1 box2让出了位置。

position:absolute时：

<html>
	<head>
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0}
			.box1{width:100px;background-color:red;position:absolute;left:0;top:0}	
			.box2{width:100px;background-color:gray;position:absolute;right:0;top:0}	
			.box3{background-color: aqua;}		
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</body>
</html>

显示效果：