float 浮动 position 定位阴影

最新推荐文章于 2024-11-05 11:58:24 发布

王的蓝色大海

最新推荐文章于 2024-11-05 11:58:24 发布

阅读量110

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/m0_57150836/article/details/118342213

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

float浮动分为 left right

清除浮动 clear:left/right

浮动设置后可能会出现浮动塌陷问题

例如一个div 其中有文本和图片设置浮动后出现溢出,图片不在div内,这就是浮动塌陷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动塌陷</title>
		<style type="text/css">
		#div1{
			border: 1px solid #FF0000;
			width: 1000px;
			height: 1000px;
			/* overflow: hidden; */
			
		}
		
			img{
				float: left;
			}
			/* #div2{
				clear: left;
			} */
		</style>
	</head>
	<body>
		<div id="div1">
			
			<p>宋 秦观
携扙来追柳外凉，画桥南畔倚胡床。
月明船笛参差起，风定池莲自在香。

夏夜追凉
 宋 杨万里
夜热依然午热同，开门小立月明中。
竹深树宻虫鸣处，时有微凉只是风。

夏日南亭怀辛大
 唐 孟浩然
山光忽西落，池月渐东上。
散发乘夕凉，开轩卧闲敞。
荷风送香气，竹露滴清响。
欲取鸣琴弹，恨无知音赏。
感此怀故人，中宵劳梦想。</p>
<h1>sdd</h1>
<img src="img/08.webp" >
<div id="div2">
	
</div>
		</div>
	</body>
</html>

解决浮动塌陷:三个方法

1.给父级设置固定宽高属性

2.给父级设置overflow:hidden;

3.在浮动的下方清除浮动

定位

position: relative/absolute/fixed

relative 相对定位 absolute 绝对定位 fixed 固定定位

相对定位与绝对定位的区别

相对定位保留原来的位置,绝对定位不保留原来位置

阴影

box-shadow 盒子阴影 (px,px,px,px,px,px)

参数一 X轴偏移量(左右阴影)