css中脱离标准流的三种方式,CSS——脱离标准流方法一:浮动

浮动是css里面布局用的最多的属性。

浮动语句:

float:left;  左浮动

float:right;  右浮动

1、没有浮动的时候

8eee986fced487ea2aac6ae29a7ad38f.png

809fb377194cfaf812753eb0df02f96e.png

2、两个盒子都左浮动

e1b9d6bde173d27a14fe71cc71a836ab.png

254f757d5e4c7392b35359662aa1c936.png

浮动的元素脱标,那么就能并排了,并且能够设置宽高了。一个span标签如果浮动,不需要转成块级元素,就能设置宽度、高度。浮动的所有标签已经不区分行内、块了。

浮动的元素互相贴靠。

3、两个盒子都右浮动

8810d0295aac6b6aef16c025c6a0c4fe.png

4、浮动的元素有“字围”效果

盒子1

12345文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

4c16df9a1dc284133d43c678d880c515.png

div左浮动,p不浮动,div挡住了p,但是p中文字不会被挡住,形成“字围”效果。

浮动的性质:脱标、贴边、字围、收缩。

收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值