浮动简介及特点

• 简介

布局方式：元素在文档流中，浮动，定位，弹性盒子，····· */

     1、浮动概念：

       是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流就不再具有元素在文档流中

       的特点，从而帮助我们布局

      2、设置浮动：float样式名  

        可选值：

          none  不浮动  默认值

          left  向左浮动

          right  向右浮动

• 浮动的特点

         特点1

           1：一旦元素设置了浮动，元素就会脱离文档流，它原来在文档流中位置，就没有了，后面                   的元素就会跑上去

           2：元素设置浮动，会尽可能的向页面的左上或者右上进行浮动

           3：浮动的元素不会超出它的父元素

           4：浮动的元素不会超过它上一个兄弟元素，最多一边齐

           5：如果浮动的元素上一个兄弟元素没有浮动，浮动元素也不会跑上去

         特点2

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

      脱离文档流的特点

      块元素：

        1:块元素不再独占页面的一行

        2:块元素的宽高默认被内容撑开，如果设置，就按设置

      行内元素：

         浮动过后的行内元素更像行内块元素,默认宽度为内容的宽度，可以设置宽高

      行内块元素：

         没有图片三像素的问题

     总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块

       特点3

     特殊点

      当浮动元素元素碰到了文字，浮动元素不会盖住文字，而文字会环绕在浮动元素

      周边。从而出现一种文字环绕图片的效果，这也是浮动最早的一个作用