CSS定位机制-浮动定位

浮动定位

概念：脱离文档流，浮动起来但不层叠，原来的位置将会被别的元素占据。也称为“浮动模型”

本质：浮动起来，不受条条框框的限制

clear属性：

（1）both，清除左右两边的浮动。

（2）left 和 right 只能清除一个方向的浮动。

（3）none 是默认值，只在需要移除已指定的清除值时用到。

一、应用场景

场景一：让两个块状元素并排显示

场景二：让box1右浮动时，则它会脱离文档流，box2和box3会上移填充

场景三：下图的第2张图中，box3向网页界面的最右边浮动，但被box1“卡住”：

二、clear属性

一、单方向清除浮动的用法

需求：让图一转为图二

方法：对box2设置clear:right;

解析：clear:right;表示该元素左右两边不能出现向右浮动的元素，否则该元素要另起一行。由于box2的左边有向右浮动的box1，所以box2只能从下一行开始进行，由于box2向右浮动，所以它位于下一行的最右边

二、双方向清除浮动的用法

需求：让图三转为图四

 

思路：侧栏向右浮动，并且短于主内容区域。如果剩下的区域足够填放页脚(footer)，则不管footer是否设置了浮动，都将按向上跳到了该空间。

方法：

#footer{
clear:both;   /* 让footer两侧都不能出现浮动，则它只能另起一行 */
}

三、实战

需求：制作HTML网页基本框架，效果如下

微信搜索：静夜一思