CSS学习笔记：浮动

浮动

float: left;
float: right;
float: none;

CSS的float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。

浮动元素

• 会以某种方式将浮动元素从文档的正常流中删除，普通流中的框会表现得像浮动不存在一样，但是框的文本内容会受浮动元素的影响，从而造成文本环绕的效果。
• 浮动元素周围的外边距不会合并。
• 如果要浮动一个非替换元素，必须为该元素声明一个width，否则该元素的宽度将趋于0.

不浮动

除了left和right，float还有一个属性：none，用来防止元素浮动。

浮动的详细内幕

• 浮动元素的包含块是其最近的块级祖先元素。
• 浮动元素会生成一个块级框，而不论这个元素本身是什么
  因此，如果让一个链接浮动，即使该链接元素本身是行内元素，通常会生成一个行内框，但只要它是浮动的，就会生成一个块级框，它会像块级元素一样摆放和表现。

有一些列特定规则控制着浮动元素的摆放：

• 浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
  

• 浮动元素的左外边界必须是源文档中之前出现的左浮动元素的右外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的下面。右浮动同理。
  也就是说，向左或向右浮动的元素会在碰到另一个浮动元素的时候停下。
  这条规则可以防止浮动元素彼此覆盖。

• 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。反之同理。
  这条规则同样防止浮动元素相互重叠。
  假如有一个父元素宽为500px，有两个300px宽的浮动元素，第一个浮到左边，第二个浮到右边，那么第二个图像并不会与第一个图像重叠100px，而是会到下一行：
  

• 一个浮动元素的顶端不能比其父元素的内顶端更高。

• 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
  
  可以看到，第二个浮动元素的顶端在第一个浮动元素之下，第三个浮动元素的顶端与第二个浮动元素的顶端相同。

• 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
  也就是说，这条规则不许元素浮动到包含该浮动元素之前内容的行的顶端之上。
  假如一个段落的正中间有一个浮动元素，这个图像顶端最高只能放在该图像所在行框的顶端。
  

• 浮动元素不能超出其包含元素的边界，如果超出了那么这个浮动元素会从下一行开始
  

总结起来，其实就是当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移到碰到了所处的容器的边框，或者碰到了另外一个浮动的元素。

实用行为

• 通过将父元素设为浮动元素，就可以把浮动元素包含在其父元素内
• 负外边距可能导致浮动元素移到其父元素的外面，但这并不违反之前有关浮动元素不超过父元素内边界的规则。

浮动元素、内容和重叠

如果一个浮动元素有负外边距，可能会与正常流中的内容发生重叠。

• 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
  
• 块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。
  
  这里的重叠行为与源文档中的顺序无关，元素在浮动元素之前还是之后出现也并不重要；不论有怎样的顺序，都会有同样的行为

clear属性

CSS clear属性指定：一个元素是紧挨着前面的浮动元素，还是必须移动到它们的下面（浮动被清除）。
clear属性既可以用于浮动元素，也可以用于非浮动元素。

• 当应用于非浮动块时，它将元素的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致外边距折叠不起作用。

• 当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

属性值：

• none
  元素不会向下移动来清除之前的浮动。
• left
  元素被向下移动，用于清除之前的左浮动。
• right
  元素被向下移动，用于清除之前的右浮动。
• both
  元素被向下移动用于清除之前的左右浮动。

清除浮动

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

<div>
<p>由于浮动元素脱离了正常文档流，因此其实父元素是无法被浮动子元素撑大的</p>
</div>

div{
  background-color:red;
  padding:5px;
}
p{
  float:left;
  background-color:aqua
}

可以看到，父元素根本就没包含浮动子元素，因此需要一种机制来解决这种问题。

• 在父元素内部的最后放置一个清除元素：

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

这种方式浪费标签，不推荐。

• overflow+zoom 方法

.fix{overflow:hidden; zoom:1;}

此方法优点在于代码简洁，就是这个overflow:hidden;有一定局限性。

• 令父元素也浮动
  给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

• after+zoom方法

.fix{zoom:1;}
.fix:after{display:block; content:'.'; clear:both; line-height:0; visibility:hidden;}

这个方式通过after伪类在元素的最后添加了一个看不见的清除元素，可谓最好用的清除浮动的方法。