float的理解

最新推荐文章于 2022-06-13 16:57:43 发布

谢诗谦

最新推荐文章于 2022-06-13 16:57:43 发布

阅读量182

点赞数

分类专栏：前端文章标签： html css3

本文链接：https://blog.csdn.net/u014387696/article/details/104896494

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实验一：由两个div创建的盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动和标准流的理解</title>
		<style type="text/css">
		.t1{
			width: 100px;
			height: 100px;
			background-color: darkorange;
		}	
		.t2{
			width: 300px;
			height: 300px;
			background-color: #0066CC;
		}
		</style>
	</head>
	<body>
		<div class="t1"></div>
		<div class="t2"></div>
	</body>
</html>

实验一效果如下所示：

实验二：在第一个div的盒子上增加float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动和标准流的理解</title>
		<style type="text/css">
		.t1{
			float: left;
			width: 100px;
			height: 100px;
			background-color: darkorange;
		}	
		.t2{
			width: 300px;
			height: 300px;
			background-color: #0066CC;
		}
		</style>
	</head>
	<body>
		<div class="t1"></div>
		<div class="t2"></div>
	</body>
</html>

效果如下所示：

结果：添加float的第一个div出现在了第二个div上

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谢诗谦

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
float的理解

实验一：由两个div创建的盒子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浮动和标准流的理解</title> <style type="text/css"> .t1{ width: 100px; heig...
复制链接

扫一扫