浮动属性
使用场景:想要竖着的横着排列的时候用,想要实现文本环绕效果的时候应用。
语法:
float:left; | 向左浮动 |
float:right; | 向右浮动 |
float:none; | 默认值 |
注意点:
- 一个盒子浮动了之后,该盒子是飘起来的,脱离文档流,不占位置。
- 一个盒子浮动了之后,下面如果是没有浮动的盒子,那么这个盒子会上去,且里面内容会环绕显示。
- 多个盒子同时浮动,会横着排列,同时左浮动,从左往右,同时右浮动,从右往左。
代码展示:
浮动前:
浮动后:
清除浮动
使用场景;设置浮动之后的排版效果。只是改变页面的排列方式。如果盒子本身是浮动的,清除浮动之后,还是飘着的。如果盒子本身不是浮动,清除浮动之后,就还是不飘着。
语法:
clear:none; | 默认值 |
clear:left; | 清左浮动 |
clear:right; | 清右浮动 |
clear:both; | 常用的 |
注意点:
- 清除浮动给的是自己,谁需要清除就给谁,只能影响自己
- 清除浮动之后只是改变排列方式
- clear里面在书写属性值的时候,要看前面的盒子是什么浮动,clear就写什么属性值
代码展示:
可以看到清除浮动之后只是改变排列方式,依然不占文档流。h1盒子会顶上去。