前端学习-浮动

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>
      <div class="d2"></div>
      <div class="d3"></div>
    </div>

缺点：如果内容需要超出，或者较多时，需求发生冲突
如果没有超过，推荐使用，比较方便
适用场景：浮动元素较少

(3)使用clear:both属性
clear:是否允许浮动
left不允许左侧浮动
right不允许右侧浮动
both不允许两侧浮动
缺点：需要写一个空标签来绑定clear属性
这个空标签没有html的作用，不符合html标签语义化

 <style type="text/css">
       .total>div{
           float:left;
        }
        .null{
           clear:both;/*清除浮动*/
         }
    </style>
   <div class="total">
       <div class="d1"></div>
       <div class="d2"></div>
       <div class="null"></div><!--在要浮动的元素后加一个空div-->
   </div>

(4)给父级设置display:inline-block
缺点：父元素的同级之间会有间隔

<style>
   .list li{
      display:inline-block;
    }
</style>
<div>
   <ul class="list">
      <li>语文</li>
      <li>数学</li>
      <li>外语</li>
   </ul>
</div>

(5)after伪类清除浮动，主流浏览器之间，兼容性是最高的，只能用类名，可以重用
:after伪类 在…之后添加

实例如下：

   <style type="text/css">
      .clearfix>div{
        float:left;
      }
      .clearfix:after{
        content:"."; //生成内容作为最后一个元素，至于content里面是点还是其他都是可以的
        display:block;     //使生成的元素以块级元素显示,占满剩余空间;
        height:0px;        //避免生成内容破坏原有布局的高度
        clear:both;        //清除两侧浮动   
        visibility:hidden; //使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;    
          }
      .clearfix{
        zoom:1; //触发IE hasLayout
       }
   </style>
    <div class="clearfix">
        <div class="left">这是左浮动</div>
    </div>

overflow属性（用来处理内容超出容器时的情况）

属性值	说明
visible	默认值。内容不会被修剪，也不会 添加滚动条
hidden	超出内容的部分隐藏
auto	如果内容被修剪（内容超出的区域），浏览器会显示滚动条以便查看其余内容
scroll	内容被修剪，但浏览器会显示滚动条查看其余内容
inherit	从父元素继承 overflow 属性的值