CSS基础-----浮动（Float）

定位的基本思想很简单，就是它允许你定义的元素框相对于其正常的位置应该出现在哪里，或者相对于父元素甚至是浏览器本身的位置

---

float

float 通常使用在布局中的一角，在CSS中，允许浮动任何元素，通过使用float属性实现：

      值：left | right | none | inherit

      初始值：none

      应用：所有元素

      继承性：无

      计算值：根据指定确定

---

float的实质 

float定义时会自动生成一个块级框，这个块级框是最近的块级祖先元素

---

float规则

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

2、浮动元素的左右外边界必须是源文档中之前出现的左浮动或右浮动元素的右左外边界，除非后出现浮动元素的顶端在先出现浮动元素底端下面

3、左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。同理右浮动元素

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

5、浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

6、如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高

7、左（右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右（左）边

8、浮动元素必须尽可能高地放置

9、左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远

 

---

float注意事项

1. 会以某种方式将浮动元素从文档的正常流中删除，会影响布局
2. 一个元素浮动时，其他内容会环绕这个元素
3. 浮动元素周围的外边距与其他元素的外边距不会合并
4. 如果非要浮动一个非替换元素，则必须为该元素声明一个width
5. 防止元素浮动的属性是：float：none

---

清除浮动

清除浮动是通过clear属性完成的

            值： left | right | both | none | inherit

           初始值：none

           应用于：块级元素

          继承性：无

          计算值：根据指定确定

---

总结

1、float生成时会自动产生一个块级框，浮动的范围不超过这个块级框

2、所有浮动是可见的，不会相互重叠

3、使用负外边距会导致浮动元素跑到父元素的外面

4、清除浮动元素使用clear属性