前端之HTML元素浮动篇（五）

最新推荐文章于 2023-07-23 21:47:25 发布

冥极醉醉冥极

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量93

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/qq_19831379/article/details/119007828

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字环绕和浮动</title>
		<style>
			.red {
				width: 100px;
				height: 100px;
				background-color: red;
				/* 浮动元素会脱了网页文档，与其他元素发生重叠，但是不能与文字内容，所以产生了环绕效果，浮动元素本身会横向排列 */
				/* 浮动元素不能覆盖文字元素、图片元素和表单元素（输入框，按钮） */
				float: left;
			}
			.green {
				width: 200px;
				height: 200px;
				background: url(../08图片/img/10.gif) no-repeat;
			}
			
			.a {
				width: 60%;
				/* background合并的写法 */
				background: url(../08图片/img/10.gif) no-repeat;
			}
			
			.b {
				width: 20%;
				background-color: red;
			}
			
			.c {
				width: 20%;
				background-color: blue
			}
			/* 相同的样式可以通过逗号来隔开 */
			.a, .b, .c {
				height: 200px;
				float: left;
			}
			
			.h {
				height: 300px;
				background-color: #000000;
				/* both：清除左浮动和右浮动的影响，left：清除左浮动，right：清除右浮动 */
				clear: both;
			}
			
			.outer {
				/* 因为子元素是浮动的，它们不占据高度，所以父元素的高度会是0，所以我们要给父元素设置高度*/
				/* height: 200px; */
				border-color: #000000;
				border-style: dashed;
				/* 对于超出父元素高度的元素，父元素会调整高度 */
				/* overflow: auto; */
			}
			
			.me {
				float: left;
				clear: right;
			}
			
			.you {
				float: right;
				clear: left;
			}
			
			.me, .you {
				text-align: left;
				width: 80%;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<p>环绕效果</p>
		<div class="red">
		</div>
		<div class="green">
			<img src="../03图片/img/1.jpg" />
			<p>
				1.控制真实对象的访问权限：通过代理对象控制真实对象的使用权限。
				
				2.避免创建大对象：通过使用一个代理小对象来代表一个真实的大对象，可以减少系统资源的消耗，对系统进行优化并提高运行速度。
				
				3.增强真实对象的功能：这个比较简单，通过代理可以在调用真实对象的方法的前后增加额外功能。
				
			</p>
		</div>
		<p>浮动效果</p>
		<!-- 在有容器浮动的时候，容器和容器会出现覆盖现象，解决这个问题就是把浮动的容器再放入一个容器内 -->
		<!-- 浮动元素的位置只参考前一个浮动元素的位置，跟其他浮动元素无关 -->
		<div class="outer">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>

		<div class="h"></div>
		<p> 不要遮住我 </p>
		<div>
			<p class="me">撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡撒我滴卡</p>
			<p class="you">偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯偶嗨哟狗杂以马斯</p>
			<p class="me">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
			<p class="you">welcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcomewelcome</p>
		</div>
	</body>
</html>

冥极醉醉冥极

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之HTML元素浮动篇（五）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文字环绕和浮动</title> <style> .red { width: 100px; height: 100px; background-color: red; /* 浮动元素会脱了网页文档，与其他元素发生重叠，但是不能与文字内容，所以产生了环绕效果.
复制链接

扫一扫