1、为什么需要浮动

       HTML中的标签元素大致分为三类:块状元素、内联元素、内联块元素。

       每种元素都有其各自的特点,其中块状元素会独占一行,而内联元素和内联块元素则会在一行内显示。如果我们想让两个甚至多个块状元素在同一行显示,这就需要用到css的浮动属性

2、什么是浮动(float)

       浮动(float)是css样式中的一个属性,主要用来对HTML页面元素进行布局。

       设置浮动属性后的标签可以向左向右移动,直至碰到另一个浮动元素或者它的父元素边界。

3、属性以及用法

属性值 作用
none 元素不浮动,按默认位置显示
left 元素向左浮动
right 元素向右浮动
inherit 继承父元素浮动属性

       在一个盒子里放置三个p标签并设置它的宽度和高度,给它们一个背景色

		<div class="box">      
			<p class="p1"></p>             <!-- 红 -->
			<p class="p2"></p>				<!-- 蓝 -->
			<p class="p3"></p>				<!-- 黄 -->
		</div>

css浮动属性插图

多元素同行显示

       如果我们想让p1 和p2在同一行靠左显示,其中一种方法就是给p1和p2 都设置float属性

			.p1{	float: left;	}
			.p2{	float: left;	}

css浮动属性插图(1)
       这时p1和p2实现了在同一行靠左显示,但是p3却向上跑到了p1和p2的下面。
       我们可以发现float属性的一个特点:当一个标签使用float属性进行浮动时,会跑到上层显示,后面紧跟的标签会按照默认样式无视浮动标签在原层面进行排列。

实现文字环绕效果

       在网页中插入一张图片并写一段话,并简单设置样式

css浮动属性插图(2)
为图片添加一个 浮动属性让其向右浮动

		img{		float:right;		}

css浮动属性插图(3)
从图中我们可以看到图片浮动,虽然遮挡住了p标签,但是并没有遮挡住文字,文字会将浮动的标签环绕包围,出现文字环绕的效果。

4、如何清除浮动对下方标签的影响:clear属性

    给被影响的标签设置clear属性,指定标签的左侧或右侧不允许存在浮动的元素。
属性值 作用
left 左侧不允许浮动
right 右侧不允许浮动
both 两侧都不允许浮动
inherit 继承父元素的clear属性
none 默认值,按默认位置显示

图片设置左浮动之后,如果不想影响下方标签的位置显示, 就为其添加clear属性

			img{
				float: right;
			}
			p{
				clear: both;
				background: orange;
			}

去除浮动影响后标签按默认样式显示

css浮动属性插图(4)

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» css浮动属性

发表评论

免登录下载网,提供全网最优质的资源集合!