css浮动float

一，浮动的特性

    0, 两个概念：a, 常规流(就是文档流。默认布局，上到下左到右). b, 包含块(离元素最近的父级块元素)

    1，浮动元素会脱离常规流,浮动元素会影响行内元素布局(从而可能间接影响块级元素)，浮动的元素会成为块级

    2，浮动的包含块(父块级元素)的布局会忽略浮动元素(有与没有浮动，父块级元素布局是一样的)

    3，浮动与定位一起使用，浮动会无效。但跟relative时是有效的

二，浮动元素的摆放

    a,尽量靠左/右、尽量靠上、尽量挨着

    b,行内元素围绕浮动元素(行内元素在左浮动的右边，右浮动的左边)

三，浮动的清除(clear, 对块级元素有效)

    a, clear: none | left | right | both

    b, clear只是将块级元素下移到某一边(或两边)没有浮动元素为止

四，浮动的闭合(即浮动元素将包含块撑开)

    0，闭合，就是包含块大到可以将所有子元素包住。想要达到这个效果有几种方法，其中最死的方法是设置包含块的高度

    1，用常规流中的块元素下移达到将包含块撑开效果(借助clear)

    2，将包含块的display: table(原理我不清楚)

    3，借助BFC(类似编程语言的作用域)，BFC的实现有css3的display: flow-root和overflow属性

    4，让包含块浮动，也是BFC

    5，借助伪元素after，before(还是要用clear，其实就是方法1的优化)。通常这么用