有关浮动的介绍和使用说明

一 序言

    浮动是一项比较常用的技术,掌握它能够更好的去处理一些内容

二 主体

    浮动的特性:

     ① 浮动就是漂浮,把一些元素漂浮起来,从而不会受块级元素的影响,边框也不会随元素的大小而变换。 

     ② 浮动的元素按照浮动属性会从父元素的左上角或者右上角排排站,当父元素的宽度不足以放下浮动元素时,会换行显示,并且换行后的起始位置由设置的浮动属性值来决定。

     ③ 浮动脱离文档流后,下面未浮动的元素会占据浮动元素的位置,导致未浮动的元素会被浮动的元素遮挡,但文字是不会被遮挡。

    下面我会用具体的例子来说明问题:

这是没有设置浮动的样子: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div style="border: 1px solid black;width:300px ;height: 350px;">
			<div style="width: 100px ;height: 100px;background-color: pink;"></div>
			<div class="s" style="width: 150px ;height: 100px;background-color: lightblue;"></div>
			<div style="width: 100px ;height: 150px;background-color: orangered;"></div>
		</div>
	</body>
</html>

 当加入浮动后:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.s{
				float: left;
			}
				
			
		</style>
	</head>
	<body>
		<div style="border: 1px solid black;width:300px ;height: 350px;">
			<div style="width: 100px ;height: 100px;background-color: pink;"></div>
			<div class="s" style="width: 150px ;height: 100px;background-color: lightblue;"></div>
			<div style="width: 100px ;height: 150px;background-color: orangered;"></div>
		</div>
	</body>
</html>

我是给淡蓝色的元素设置了浮动,虽然不能立体的看出它漂浮了起来但是通过分析,我们能看出它从原来的位置出来了,所以在它下面的橘色元素占据了它的位置,并且淡蓝色覆盖了没有漂浮的橘色。

    那么怎样能在编辑的过程中清除浮动呢?

    给父级元素添加 class="clearflex"

    在css中给父级元素添加属性:overflow:hidden;

    伪元素清除

    建立空的div,命名为clear,在css中添加clear:both

我会用代码进行说明其中一种:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.s{
				float: left;

			}
			
		</style>
	</head>
	<body>
		<div style="border: 1px solid black;width:300px ;height: 350px;">
			<div style="width: 100px ;height: 100px;background-color: pink;"></div>
			<div class="clearflex" style="width: 150px ;height: 100px;background-color: lightblue;"></div>
			<div style="width: 100px ;height: 150px;background-color: orangered;"></div>
		</div>
	</body>
</html>

    

 也就是在父级元素中添加 class="clearflex" 即可

三 尾章

    我会在后续的学习中对浮动这个章节进行不断地补充,有问题也可以给我留言。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值