CSS中的浮动和定位

• 写博原因
• 定位
  • 固定 fixed
  • 静止 static
  • 相对 relative
  • 绝对 absolute
• 浮动
  • 左右浮动
  • 清除浮动
• 总结

写这篇博客的原因

牛腩的新闻发布系统功能已经全部实现，但是看了看页面，很是歪瓜裂枣，与原作和很多网页一比，实在是不堪入目，如下图：

我知道你想说什么，我觉得也是。人靠衣装美靠靓妆，网页靠什么装？还是靠CSS吧。究其原因，还是对css中浮动和定位理解太浅，加上没有美术细菌导致，下面就较为仔细的说说浮动和定位。

定位

定位指的是确定某个元素的显示位置，定位有两个重要的因素，一个是相对于谁；一个是原空间的有无。

静止static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
相对relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
绝对absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
固定fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。稍解释一下，框可以向左右浮动，浮动以父级元素为基准，由于浮动只是确定方向，并没有用距离加以规定，那什么时候停止移动？当它浮动过程中碰到父级元素的框或是碰到另外一个浮动框的边框的时候停止，由于浮动框脱离了标准流，标准流中的其它元素该怎么排列还怎么排列，与这个浮动的无关。

左右浮动示例

为了方便简洁的演示，使用的是w3school的在线测试工具，以三张图片示例演示，第一张图片为“apple”，第二张为“cute”，第三张为“background”。

未操作前：

apple向右浮动：

仅仅是apple向右浮动了，而其它两张图片的排列并未有任何变化，这就是“文档的普通流中的块框表现得就像浮动框不存在一样”。

apple向右浮动，cute向左浮动后：

可以看到浮动后，因为它们的父级元素相同，均为外面的框，apple由于向右浮动，移动到界面最右侧，cute由于向左浮动，移动到最左侧。需要注意的是cute由原来的靠下的位置浮动后靠上了。

均向左浮动：

表现为这样是因为，apple最先执行向左浮动，占据最前的位置，当cute相对父级元素向左浮动时，本应也是apple的位置，但是已被apple占据，当cute浮动过程中碰到了apple的右边框时即停止浮动，background图片雷同。

“意外”浮动：

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

清除浮动

clear 属性规定元素的哪一侧不允许其他浮动元素。

均向右浮动：

清除左右浮动：

原因是，apple两侧均不允许出现浮动，cute只能向下移动，直到脱离apple的左右范围，background雷同。

总结

浮动和定位实际上都可以算是“定位”，即根据显示的需要定义指定元素出现的位置，当然css内容要比这多得多，此处只是简单的介绍一下定位和浮动。