前端学习-浮动

float浮动：使元素脱离文档流
float:none;无（默认）
float:left; 向左浮动
float:right;向右浮动

1).所有的元素都可以浮动。
2).具有float属性元素在父标签中是不占空间的。
3).float能解决标签之间有间隙的问题

auto：根据自身所占位置自动居中
（1）自身必须有宽高
（2）inline-block和float都会使auto失效，需要设置具体值

浮动产生的影响：
(1)自身的父元素无法获取宽高；解决:给父元素添加宽高
(2)后续的元素会自动补位；
(3)浮动会脱离当前文档流，覆盖标准流的元素；解决：overflow：hidden；
(4)auto会失效；解决：设置具体值
(5)块元素可以横排显示（失去独占一行 的特性）
(6)行元素可以设置宽高
(7)依然支持margin和padding
(8)提升了半个层级，z-index：后面是数字，数字越大层级越高（后续课程）

注意：
1.使用浮动布局，一定要清除浮动！
2.内联块会环绕着浮动元素
3.对列表使用右浮动时，li列表元素内容先后顺序是相反的

常见的清除浮动的方法：
(1)给父级元素添加宽高
缺点：父级如果作为容器，直接写死了，后续元素添加会出问题，
而且无法解决元素重叠的问题,不推荐使用

(2)使用overflow：hidden属性(超出内容的部分隐藏)

  <style type="text/css">
       .big>div{
   
          float:left;
         }
       .big{
   
          overflow:hidden;
          }
    </style>
    <div class="big">
      <div class="d1"></div