本文主要是介绍牛腩新闻发布系统——盒子的浮动与定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
浮动和定位的相关知识，是设计精美网页的必要前提之一。在学习浮动与定位之前，我们先了解一下相关知识“标准流”。
一、标准流
标准流，是指在不适用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列的。我们把这些元素分为以下两类：
块级元素（block level）：占据着整个矩形区域，以块的形式表现出来，并且跟统计的兄弟块依次竖直排列，左右撑满。如<li>、<ul>、<div>都是块级元素。
行内元素（inline）：各个字母之间横向排列，到最右端自动折行。本身不占有独立的区域，仅是在其他元素的基础上指出了一定的范围。如<a><p>标记。
了解了标准流的概念，接下来继续学习盒子的浮动与定位。
二、盒子的浮动
基本属性：
float属性：默认为 none，即标准流。通过设置 float 属性的值为 left 或 right，元素会向其父元素的左侧或右侧靠近，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。
clear 属性：作用是为了消失由于使用 float 后，浮动的盒子对其他盒子的影响。clear 的值有 left、right 和 both，分别表示消除左边的影响、消除右边的影响和消除左右两边的影响。
在标准流中，我们知道，块级元素在水平方向上会自动伸展，在其父元素中占满一整行；而在竖直方向和其他元素依次排列不能并排。但使用浮动方式后，会发生改变。
如图所示：box1、box2、box3为块级元素，文字为行内元素
图1为标准流下个元素的排列：box占满整行，竖直排列，文字横向排列，行满后自动折行。
图2设box1为左浮动，脱离标准流，他原来的位置由标准流的box2填补。浮动的盒子box1不再伸展，其宽度为容纳内容的最小宽度。
图3设box2也为左浮动，由图可知，box1和box2间有空白，是由两者的margin构成。
图4为box1、box3左浮动，box2右浮动：行内元素自动填充到空白位置，而且可以通过设置浮动，调整box的位置。
图5，用clear：both清除浮动，实现文字的排版。
三、盒子的定位
广义的"定位"：泛指一个网页排版中的定位操作，使用任何 CSS 规则来实现。
狭义的"定位"：通过设置 CSS 中的属性 position 来进行定位。
position的属性：
1）static：默认的属性值，按照标准流（包括浮动方式）进行布局。
2）relative：称为相对定位，使用相对的盒子的位置常以标准量的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位仍在标准流中，它对父块和兄弟块盒子没有任何影响。
3）absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。
绝对定位从标准流中脱离，并且以它的"最近"的一个"已经定位"的"祖先元素"为基准进行定位。没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。
4）fixed：固定定位，与绝对定位类似，以浏览器窗口为基准进行定位，拖动浏览器窗口的滚动条时，位置保持不变。
当position的属性为relative、absolute和fixed时，通过设置left、right、top和bottom来制定偏移量，达到页面要实现的定位效果。
浮动与定位的基本知识很简单，但应用时，需要我们仔细的设计与精确的计量，才能准确定位，达到预期的页面效果。我们要多多实践，在实际应用中熟练掌握这些知识。
这篇关于牛腩新闻发布系统——盒子的浮动与定位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
