3.css浮动

1.标准流(normal flow)

html语言当中另外一个相当重要的概念----------标准流！或者普通流。标准流实际上就是一个网页内标签
元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次从左向右，从上向下排列；
按照这种大前ᨀ的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称做流式布局。

标准流，流式布局

流式布局.png

2.浮动的本质

•word中图片和文字混排
•浮动（float），浮动的盒子可以向左或向右移动，直到它的外边缘碰到包含盒子或另一个浮动盒子的边
  框为止
•浮动做布局，仅仅是附带来的，是滥用的结果。本质是用于图文排版。

3.元素的浮动属性float

什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
如何定义浮动？
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
      选择器{float:属性值;} none ,left, right
float属性值：
    属性值                     描述
    left                   元素向左浮动
    right                  元素向右浮动
    none                元素不浮动（默认值）

4.浮动特性★★★★★

1.浮动脱离标准流，不占位置，但会影响标准流。但会影响文字排版，浮动只有左右浮动。
2. 浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一
  个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
4.浮动根据元素书写的位置来显示相应的浮动。
5. 元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。元素的大小完全取决于定义
  的大小或者默认的内容多少。也就是具有了包裹性。
6.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容
7.同一行当中先写浮动的标签

5.父容器高度塌陷

• 如果一个标准流中的盒子所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器整个高度会塌陷。
• 如何实现自适应包裹浮动子元素呢？clearfix

6.overflow属性的应用

当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方
式，就需要使用CSS的overflow属性，其基本语法格式如下：
        选择器{overflow:属性值;}
overflow属性的常用值
    属性值                             描述
    visible          内容不会被修剪，会呈现在元素框之外（默认值）
    hidden           溢出内容会被修剪，并且被修剪的内容是不可见的
    auto             在需要时产生滚动条，即自适应所要显示的内容
    scroll           溢出内容会被修剪，且浏览器会始终显示滚动条

7.清除浮动

语法： clear：left|right|both;
clear是指让当前元素放置的时候，会自动判断左侧或右侧或者双侧是否有浮动的元素，如果有就往下放，
如果没有的就放下。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
      选择器{float:属性值;}
clear属性的常用值
    属性值                       描述
    left           不允许左侧有浮动元素（清除左侧浮动的影响）
    right          不允许右侧有浮动元素（清除右侧浮动的影响）
    both           同时清除左右两侧浮动的影响
常用四种清除浮动的方法：
    − 方法一：使用空标记清除浮动，隔墙放。增加标签。
    − 方法二：使用overflow属性清除浮动。会误伤。
    − 方法三：使用after伪对象清除浮动。
    − 方法四：使用before after伪对象清除浮动
    − Clearfix
after伪对象清除浮动时的注意事项：
1. 必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。
2. 必须在伪对象中设置content属性，属性值可以为空，如“content: "";”。
.clearfix:after{ /*对类名为father父元素应用after伪对象样式*/
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0;
}

8.闭合浮动(直接用就可以)

after 和 before伪对象清除浮动时的注意事项：
    .clearfix::before,.clearfix::after{
            content:””;
            display:table;
    }
    .clearfix:after{
            clear:both;
    }
    .clearfix{*zoom:1;}//兼容IE6

9.触发BFC

条件:1.relative   absolute
     2.float
     3.display:table
     4.overflow:hidden/auto
     5.*zoom:1(触发IE6，7的haslayout,和BFC基本上是一致的)  
特点:1.具有包裹性(里面的子元素无论怎么样设置都不影响父元素的布局,外边距合并失效,前提是不设置
    他[也就是父级]的宽高)