HTML盒子模型的浮动

最新推荐文章于 2024-06-19 19:16:24 发布

fash man

最新推荐文章于 2024-06-19 19:16:24 发布

阅读量2.4k

点赞数 3

文章标签： html css css3

本文链接：https://blog.csdn.net/fashair/article/details/122024799

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 这个设置方便两个小盒子移动说观看 */
			#baokuo{
				/* 盒子高 */
				width: 600px;
				/* 盒子宽 */
				height:600px;
				/*盒子边框1像素且为实线边框，边框线为红色*/
				border: 1px solid red;
				/* 防止盒子塌陷 */
				overflow: hidden;
				text-align: center;
			}
			/* 要使三个盒子在一起可以去设置你包括这三个盒子的宽跟高 */
			.hezi1{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				/* 盒子向左移动 */
				float: left;
			}
			.hezi2{
				width: 200px;
				height: 200px;
				border: 1px solid green;
				/* 紧跟着第一个盒子旁在同一行中，你也可以向右移动 */
				float:left;
			}
			/*  */
			.hezi3{
				width: 200px;
				height: 200px;
				border: 1px solid blueviolet;
				/*  */
				float:left;
			}
			/* 你也可以加文字配合移动来使用（我一般这样是做图文） */
			.wenzi1{
				/* 这里面可以根据图跟文字的距离去用padding 去调他们的距离 */
				float:left;
				padding: 10px;
				}
		</style>
	</head>
	<body>
		<div id="baokuo">
			<div class="hezi1">
				1
			</div>
			<div class="hezi2">
				2
			</div>
			<div class="hezi3">
				3
			</div>
			<div class="wenzi1">
				21654154
			</div>
		</div>
	</body>
</html>

盒子模型的浮动塌陷有三种

1：在父级设置合适的css高度

2：在父级结束的</div>前在设置一个div里面引入"class=clear"样式

3：在父级的css中可以加入overflower：hidden消除浮动（我个人喜欢第三种）

第二次发博客有不足之处欢迎大家指出！

fash man

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML盒子模型的浮动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 这个设置方便两个小盒子移动说观看 */ #baokuo{ /* 盒子高 */ width: 600px; /* 盒子宽 */ height:600px; /*盒子边框1像.
复制链接

扫一扫