CSS浮动布局 float属性

最新推荐文章于 2022-11-13 23:35:14 发布

believehxl

最新推荐文章于 2022-11-13 23:35:14 发布

阅读量173

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/believehxl/article/details/115138098

版权

该博客探讨了CSS中的浮动布局属性`float`，通过示例展示了如何使用`float:left`使元素向左浮动，导致相邻元素调整位置。文章还强调了浮动元素的宽度由内容决定，并且外边距在同为浮动元素的相邻元素间生效。同时，内容提到了布局变化对整体设计的影响。

摘要由CSDN通过智能技术生成

CSS浮动布局 float属性

<!DOCTYPE html>
<html>
<head>
	<title>CSS浮动布局</title>
	<style type="text/css">
		#myd{height: 400px;width: 600px;border: green 10px dashed;background-color: purple;padding: 10px;overflow: auto;}
		#myd div{background-color: yellow;border: 8px pink dotted;margin:10px;}
		p{font-size: 15px;text-indent: 30px;color: yellow}
	</style>
</head>
<body>
	<div id="myd">
		<div id="d1">第一个div元素</div>
		<div id="d2">第二个div元素</div>
		<div id="d3">第三个div元素</div>
		<p>是岁十月之望，步自雪堂，将归于临皋。二客从予过黄泥之坂。霜露既降，木叶尽脱，人影在地，仰见明月，顾而乐之，行歌相答。已而叹曰：“有客无酒，有酒无肴，月白风清，如此良夜何！”客曰：“今者薄暮，举网得鱼，巨口细鳞，状如松江之鲈。顾安所得酒乎？”归而谋诸妇。妇曰：“我有斗酒，藏之久矣，以待子不时之需。”于是携酒与鱼，复游于赤壁之下。江流有声，断岸千尺；山高月小，水落石出。曾日月之几何，而江山不可复识矣。予乃摄衣而上，履谗①岩，披蒙茸，踞虎豹，登虬龙，攀栖鹘之危巢，俯冯夷之幽宫。盖二客不能从焉。划然长啸，草木震动，山鸣谷应，风起水涌。予亦悄然而悲，肃然而恐，凛乎其不可留也。反而登舟，放乎中流，听其所止而休焉。时夜将半，四顾寂寥。适有孤鹤，横江东来。翅如车轮，玄裳缟衣，戛然长鸣，掠予舟而西也。是岁十月之望，步自雪堂，将归于临皋。二客从予过黄泥之坂。霜露既降，木叶尽脱，人影在地，仰见明月，顾而乐之，行歌相答。已而叹曰：“有客无酒，有酒无肴，月白风清，如此良夜何！”客曰：“今者薄暮，举网得鱼，巨口细鳞，状如松江之鲈。顾安所得酒乎？”归而谋诸妇。妇曰：“我有斗酒，藏之久矣，以待子不时之需。”于是携酒与鱼，复游于赤壁之下。江流有声，断岸千尺；山高月小，水落石出。曾日月之几何，而江山不可复识矣。予乃摄衣而上，履谗①岩，披蒙茸，踞虎豹，登虬龙，攀栖鹘之危巢，俯冯夷之幽宫。盖二客不能从焉。划然长啸，草木震动，山鸣谷应，风起水涌。予亦悄然而悲，肃然而恐，凛乎其不可留也。反而登舟，放乎中流，听其所止而休焉。时夜将半，四顾寂寥。适有孤鹤，横江东来。翅如车轮，玄裳缟衣，戛然长鸣，掠予舟而西也。</p>
	 </div>
</body>
</html>
![运行结果](https://img-blog.csdnimg.cn/20210323191812368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbGlldmVoeGw=,size_16,color_FFFFFF,t_70)
当给代码加上CSS代码

#d2{float: left;}


![第二个盒子紧贴于第一个盒子](https://img-blog.csdnimg.cn/2021032319230981.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbGlldmVoeGw=,size_16,color_FFFFFF,t_70)
当给代码加上CSS代码

#d2{float: left;}
第三个盒子紧贴与第二个盒子，第二个盒子靠近第一个盒子，并且有间距（margin）
注意：当元素变成浮动元素时，宽度不在延伸而是由内容决定其宽度，如果相邻元素同为浮动元素，外边距就会生效。