css浮动

目录

浮动简介

浮动的特点

---

浮动简介

布局方式：元素在文档流中，浮动，定位，弹性盒子，····· 
 1、浮动概念：是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流
    就不再具有元素在文档流中的特点，从而帮助我们布局
      2、设置浮动：float样式名  
        可选值：
          none  不浮动  默认值
          left  向左浮动
          right  向右浮动

浮动的特点

（1）、基本特点
           a:一旦元素设置了浮动，元素就会脱离文档流，
           它原来在文档流中位置，就没有了，后面的元素就会跑上去，顶上
           b:元素设置浮动，会尽可能的向页面的左上或者右上进行浮动
           c:浮动的元素不会超出它的父元素
           d:浮动的元素不会超过它上一个兄弟元素，最多一边齐
           e：如果浮动的元素上一个兄弟元素没有浮动，浮动元素也不会跑上去
（2）特殊点
           当浮动元素元素碰到了文字，浮动元素不会盖住文字，而文字会环绕在浮动元素
            周边。从而出现一种文字环绕图片的效果，这也是浮动最早的一个作用
（3）当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变
脱离文档流的特点
块元素：
    1:块元素不再独占页面的一行
    2:块元素的宽高默认被内容撑开，如果设置，就按设置
行内元素：
    1:浮动过后的行内元素更像行内块元素,默认宽度为内容的宽度，可以设置宽高
行内块元素：也没有图片三像素的问题
总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块