css float元素浮动

一、元素浮动设置

float:left/right标签对象靠左/靠右
参数值:
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边
在这里插入图片描述在这里插入图片描述

二、float应用

1.文字环绕代码片段

<style type="text/css">/*head*/
			.green{
				width:100px;height:100px;
				background-color:green;
				float:left;
			}
			.red{
				width:200px;height: 150px;
				background-color: red;
			}
</style>
<p>文字环绕效果</p> <!--body-->
		<div class="green"></div>
		<div class="red">
			文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
		</div>

效果截图:
在这里插入图片描述

2.横向排版布局

代码片段:

<style type="text/css">/*head*/
	.a{
		width:200px;
		background-color: green;
	}
	.b{
		width:800px;
		background-color: red;
	}
	.c{
		width:300px;
		background-color: blue;
	}
	.a,.b,.c{
		height:200px;
		float:left;
	}
</style>

<p>横向排版布局</p> <!--body-->
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>

效果截图:
在这里插入图片描述

3.清除浮动

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
clear:left/right/both

.a{
	clear:both;
}
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

一枚小棋子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值