《CSS权威指南》之float浮动属性学习笔记

float 

 属性：right  |  left |  none |  inherit

• 应用于所有元素

一 基本概念

       浮动图像时，其他内容会“环绕”该元素。元素浮动同理。

• 包含块（containning block）

       是浮动元素最近的块级组先元素。

       无论元素本身是什么，哪怕是行内元素，浮动元素都会生成一个块级框（block）。

---

二 约束规则

1. 浮动元素会从文档的正常流中删除，不占位但仍然影响布局。
2. 浮动元素的外边距不能超过包含块的内边距。多个浮动元素不能出现在一个水平行上。
3. 如果没有足够空间，浮动元素会被挤到新的“行”上。
4. 浮动元素彼此之间不覆盖。（延伸：定位容易导致元素相互覆盖）
5. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
6. 满足其他约束条件的前提下，浮动尽可能高。左浮动元素尽可能向左，右浮动元素尽可能向右。

• 实际问题

1. 浮动元素超出父元素，可以将父元素设置为浮动元素，可以把浮动元素包含在父元素内。
2. 出现负外边距，浮动元素可能会超出其父元素的左右内边界。边距计算公式：边距 = 长度+外边距+内边距。

---

三 浮动元素与正常流中的内容重叠

1. 行内框与浮动元素重叠，其边框、背景和内容都在浮动元素之上显示。
2. 块框与浮动元素重叠，其边框、背景在该浮动元素之下显示，内容都在浮动元素之上显示。

---

clear

 属性：right  |  left | both | none |  inherit

•  应用于块级元素，可解决重叠问题。

约束规则

1. clear不能用于br，因为br是行内元素。如若使用，要改变display值。
2. clear元素的顶端外边距会被忽略。clear元素的上外边距可能会被调整。
3. clear元素会有一个清除区域（clearance）。即一个元素周围的多大范围内不允许有浮动，但这个范围大多数情况下无法确定。

         解决办法：为浮动元素本身设置下外边距。