CSS浮动属性

浮动属性

使用场景：想要竖着的横着排列的时候用，想要实现文本环绕效果的时候应用。

语法：

float:left;	向左浮动
float:right;	向右浮动
float:none;	默认值

注意点：

• 一个盒子浮动了之后,该盒子是飘起来的,脱离文档流,不占位置。
• 一个盒子浮动了之后,下面如果是没有浮动的盒子,那么这个盒子会上去,且里面内容会环绕显示。
• 多个盒子同时浮动,会横着排列，同时左浮动,从左往右，同时右浮动,从右往左。

代码展示： 

浮动前：

浮动后： 

 

清除浮动

使用场景；设置浮动之后的排版效果。只是改变页面的排列方式。如果盒子本身是浮动的,清除浮动之后,还是飘着的。如果盒子本身不是浮动,清除浮动之后,就还是不飘着。

语法：

clear:none;	默认值
clear:left;	清左浮动
clear:right;	清右浮动
clear:both;	常用的

注意点：

• 清除浮动给的是自己,谁需要清除就给谁,只能影响自己
• 清除浮动之后只是改变排列方式
• clear里面在书写属性值的时候,要看前面的盒子是什么浮动,clear就写什么属性值

代码展示：

 可以看到清除浮动之后只是改变排列方式，依然不占文档流。h1盒子会顶上去。