CSS 浮动与定位

float属性:该属性用来设置浮动操作
1,none:默认值,表示不能浮动,元素属于正常文档流
2,left:表示向左浮动,元素会沿着父容器靠左排列切脱离文档流。
CSS 浮动与定位
CSS 浮动与定位
可以看出,box2脱离了文档流,浮在box3上。
3,right:表示对元素向右浮动,元素沿着父容器靠右排列。
CSS 浮动与定位
CSS 浮动与定位
靠左排列:
CSS 浮动与定位
CSS 浮动与定位
靠右排列:
CSS 浮动与定位
CSS 浮动与定位
float的注意点:
1,只会影响后面的元素,对之前的元素不会造成任何影响
CSS 浮动与定位
CSS 浮动与定位
2,内容默认提升半层
正常文档流位于页面的底层,而脱离文档流位于页面的上边那么当有内容存在时,内容默认在底层和上层之间。
CSS 浮动与定位
CSS 浮动与定位
利用这个可以实现图文混排的效果:
CSS 浮动与定位
CSS 浮动与定位