CSS元素定位--浮动（float）与清楚（clear）

CSS中定位的基本思想：

定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素，又或者是相对于另一个元素，甚至相对于浏览器窗口本身的位置。

浮动 ( float )：

   CSS中允许对所有元素进行浮动，这种行为使用属性 float 实现。float可选值：left | right | none | inherit

浮动元素：

对于浮动元素有几点需要记住：

1. 声明为浮动的元素会被以某种方式从文档的正常流中删除，不过它们依然会影响布局。这种影响的一个具体表现为：一个元素浮动时，其他内容会“环绕”该浮动元素。

2. 如果要确定要浮动一个非替换元素，则必须为该元素声明一个 width 属性。否则，根据CSS规范，该元素的宽度趋于 0 。假设浏览器的最小 width 为 1个字符，那么没有声明 width 属性的非替换浮动元素可能只有 1 个字符宽。

3. 浮动元素的外边距(margin)绝对不会与其他浮动元素的外边距重叠。

4. 如果要确保一个元素不浮动，最好显示的声明该元素的 float 属性值为：none 。虽然所有元素的 float 属性的默认值为none，但是，在浏览器实现中，如果没有显示的制定这个 none 值，所有元素都会以某种方式浮动。

浮动的详细理解

浮动元素的包含块(Containning Block)

浮动元素的包含块是其最近的块级祖先元素。

浮动元素会生成一个块级框，而不论这个元素本身是什么（例如，正常情况下 span 属于行内元素display： inline）

浮动元素的摆放规则

• 浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。(注意：没有包含上下边界哦~~！！!)
• 浮动元素的左（或右）外边界必须是源文档中之前出现的浮动左浮动（或右浮动）元素的右（或左）外边界，即是：所有浮动元素也是按‘队列’形式排列的），除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。这条规则可以防止浮动元素彼此“覆盖”，确保所有浮动元素都是可见的。
• 一个左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。（这个规则读起来相当拗口-_-，理解起来也是相当吃力的，需要对CSS的盒式模型有较为深入的理解），不理解这条规则也无所谓啦，只需要记住：这条规则最终的用处在于防止浮动元素间相互重叠。如果你想要深究，可以参见我的笔记：CSS盒式模型。这里举个栗子帮助大家快速理解一下：假设我们现在有一个 600 * 600 的 div， 让后它包含了两个 400 * 400 的浮动元素，一个浮动到左边，一个浮动到右边， 400 + 400 大于 600 ,这个时候为了防止两者间发生 100 个像素的重叠，浏览器将会按这条规则要求的，将第二个浮动div（右浮动的那个）向下浮动，直到其顶端在左浮动div的底端之下。 演示如下：
  
<div style="width:600px; height: 600px; background-color:darkred">
<div style="width:400px; height: 400px; background-color:yellow; float: left;"></div>
<div style="width:400px; height: 400px; background-color:bule; float: right;"></div>
</div>

• 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距元素之间，放置这个浮动元素时就好像在两个元素之间有一个块级元素。这条规则后半部分同样让人一下子理解不来，还是举个栗子吧：现在有一个div，其中包含了三个段落（

  ），其中中间的段落设置为浮动。在这种情况下，为了防止段落浮动到三个段落共同的父元素div的顶端，就需要这条规则来限定啦。这时，上下两个段落间就会表现出块级元素的特性，以便中间的段落进行浮动。

• 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。（类似于上一条规则）不过这条规则更直观的用处在于：1 和 2 的宽度总和大于了三个div的共同父级块元素的宽度，且div1和div2都是left浮动，所以，div2 自动换行到div1的下面，这一规则在前面以前给出了，本条规则的直观表现在于，div3 它的顶端并没有超过div2的顶端，即使 div1 的右边依然有足够的空余空间，这条规则结合第二条规则就很容易理解这样的布局出现的原理了。
  
<div style="width:180px; height: 220px; background-color:blue">
<div style="width:80px; height:40px; float:left; background-color:rgb(98, 205, 468)"> </div>
<div style="width:120px; height:40px; float:left; background-color:rgb(100, 80 , 205)"> </div>
<div style="width:40px; height:40px; float:right; background-color:yellow"> </div>
</div>

  
  • 如果源文档中一个浮动元素之前出现了另一个元素，浮动元素的顶端不能比包含该浮动元素（的包含块）所生成框的任何行框的顶端高。举个栗子来理解记忆：假设一个段落的正中间有一个浮动图像，由于这条规则的限制。这个图像顶端最高只能放在该图像所在行框的顶端。
  • 左（或右）浮动元素的左边（或右边）右另一个浮动元素时，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。也即是：浮动元素不能超出其包含元素的边界，除非它真的很宽，本身都无法放下（例如：一个400 * 400 的父级块元素包含了一个 600 * 600 的浮动元素）。上上条规则的示例中 1 和 2 就是本规则的演示。
  • 浮动元素必须尽可能高的放置。当然必须要尽可能高的前提是满足上面的所有规则。

实际应用

在大部分浏览器，当浮动元素的高度超过包含元素的高度时，其显示会向下超出包含元素。一些旧时代的浏览器可能会采用增加包含元素高度的方案来解决这个问题。同样的左右边界也是一样的处理方案，chorme40+中亲测通过。
当外边距的值为负数时，可能会导致浮动元素移动到父元素的外面。看起来就像违反了前面的排放规则一样。这号的理解就是用笔计算一下，这个需要理解一下CSS的盒式模型。
如果一个浮动元素和正常流中的内容发生重叠会发生什么情况呢？
针对此问题，CSS2.1规范中给出了明确的解释：

1. 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素’之上’显示

2. 块框与一个浮动元素重叠时，其边框和背景在该浮动元素’之下’显示，内容在浮动元素’之上’显示

清楚浮动（clear）

利用clear属性，我们可以确保元素指定的方位旁不会出现浮动元素。
直接上栗子：
我们希望p元素不会放在做浮动的元素的右边，那么我们可以这样声明p{clear : left}。也可以这样理解：p元素的左边不能出现浮动元素。