css-浮动篇

浮动

1.传统网页布局三种方式

1. （1）标准流：
      *块级元素：div hr p h1-h6 ul ol dl form table等
       *行内元素：span a i em等

   （2）浮动：
      *浮动可以改变元素标签的默认的排列方式，通过浮动可以使一个元素向其父元素的左侧或右侧移动
      *浮动最经典的应用：可以让多个块级元素一行内排列显示
      *网页排列第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动
   （3）定位：css-定位篇

2.浮动

（1）语法：

（2）浮动的特性：
    浮动的元素会脱离标准流
    浮动的盒子不再保留原来的位置
    如果多个盒子设置了浮动，则他们会按照属性值一行内显示 并且顶端对齐排列
    浮动元素具有行内块元素特性

（3）脱离文档流的特点:
   i.块级元素：不再独占一行
            盒子不设置宽度和高度时，宽度和高度的大小由内容决定
   ii.行内元素：转换为行内块元素，特点和行内块元素一样
   iii.注意：浮动的盒子是互相贴靠在一起的（不会有间隙），如果父级宽度装不下这些盒子，多出的盒子会另起一行对齐
（4）浮动的元素经常和标准流父级搭配使用：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

（5）浮动布局注意点：
      浮动和标准流的父盒子搭配使用
      一个元素浮动，理论上其余的兄弟元素也要浮动，浮动的盒子会影响后面的标准流而不会影响前面的标准流
（6）高度塌陷问题：
      i. 在浮动布局中，父元素的高度默认是子元素撑开的，当子元素浮动后会完全脱离文档流，子元素从文档流中脱离导致其无法撑起父元素的高度，导致父元素的高度丢失，父元素的高度丢失后，其他元素会自动上移，导致页面的布局混乱
      ii.清除浮动（闭合浮动）的本质：清除浮动元素造成的影响
（7）清除浮动的方法：

      i .如果我们不希望某个元素因为其他元素的浮动而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
          clear
           -作用：清除浮动元素所产生的影响
           -可选值：left 清除左侧浮动元素对当前元素的影响
                 right 清除右侧浮动元素对当前元素的影响
                 both
           -原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距以使其位置不受其他元素的影响

     ii.开启元素的BFC（块级格式化环境），BFC是CSS中的隐含属性，可以为一个元素开启BFC，则该元素会变成一个独立的布局区域
          -元素开启BFC的特点：
              *开启BFC的元素不会被浮动的元素所覆盖
              *开启BFC的元素子元素和父元素的外边距不会重叠
              *开启BFC的元素可以包含浮动的子元素
              *开启元素BFC的方法：设置元素的浮动（不推荐）
                         将元素设置为行内块元素（不推荐）
                         将元素的overflow设置为一个非visibie的值

.box {
            /* 清除浮动  常用方式: 为元素设置overflow：hidden，开启BFC，以使其包含浮动的元素*/
            overflow: hidden;/*hidden（缺点：溢出部分无法显示）、auto、 scroll*/
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

     iii.父级添加after伪元素

.clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both；
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

``