在CSS 中，用 float 和 position 的区别是什么

html-css026

在CSS 中，用 float 和 position 的区别是什么,第1张

CSS布局浮动(float)和定位(position)属性的区别：

1、postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

2、float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

二者之中最大的差别就是位置保留。

3、同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

常用的清除浮动的方法有两种：

通过在容器中添加一个标签，设置该标签的样式为 clear: both

容器设置overflow: hidden

<div style="background: #fffwidth: 100%overflow: hidden">

   <div style="float: leftposition: absolute">我是DIV</div>

   <div style="clear: both"></div>

<div>

效果：

由上图对比可以看到，中间部分始终居中，但是会根据屏幕的大小判断一行最多显示多少张图片。让框架居中有多种方法，最常见的是添加 margin：0 auto；

因为我们要让整个屏幕显示至多张图，所以我只要求得屏幕至多能放下多少个图片后，剩下的数平均分给左右外边距，这样即能居中，例如：margin：10px auto

html代码：

<div class="container" style="margin:0 auto">

<div class="aside"></div>

<div class="photo_box">

<div class="photo_img"><img src="1.jpg" alt="" width="" height="" /></div>

<div class="photo_img"><img src="2.jpg" alt="" width="" height="" /></div>

</div>

...

</div>

js代码：

$(document).ready($onresize = function(){

var Winh = $(window).width(), Wimg = $(".photo_img").width() + 38,

Wsidebar = $(".aside").width() + 24

var mainWidth = Winh - Wsidebar

var imgBs = mainWidth % Wimg //imgBs为最多放下图片后剩下的余数

var a = Math.floor( imgBs / 2)//余数平分即为外边距大小

$(".container").css("margin-left", a )

$(".container").css("margin-right", a )

})

$(window).bind("resize", $onresize)

ps：有一个很重要的问题，必须给html强制滚动条，否则，在某些显示器下，会出现切边的效果，其实是因为开始算屏幕宽度的时候，滚动条还没加载出来，宽度会算多一点，这样，这样左右的外边距大于实际边距，就发生了切边的效果。像这样：html{ overflow:scroll}

这个想法就像是小时候做的数学题，一块多大面积的蛋糕，切成每份多大，最多能分给多少人，这里只是加了一个居中的条件。然后当浏览器改变大小的时候，也会重新加载一次，算一次。而图片的位移会使用Masonry.js这个库的动态效果，整个过程很流畅，如果网速不限制，显示的效果是非常好的。