11.浮动(float)一.float属性可以通过float属性让元素产生

一.float属性

可以通过float属性让元素产生浮动效果，float的常用取值

none：不浮动，默认值
left：向左浮动
right：向右浮动

二. 浮动的规则

2.1 规则一:脱离标准流,朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

元素一旦浮动后

脱离标准流
朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动float</title>
  </head>
  <style>
    /* 
    float规则:浮动
      1.- 元素一旦浮动后
          - 脱离标准流
          - 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
      2.定位元素会层叠在浮动元素上面
    */
    .content {
      height: 300px;
      background-color: pink;
    }

    a {
      background-color: red;
    }

    strong {
      float: left;
      background-color: yellowgreen;
    }

    span {
      float: left;
      background-color: green;
    }
  </style>

  <body>
    <div class="content">
      <a href="">a元素</a>
      <strong>strong元素</strong>
      <span>span元素</span>
    </div>
  </body>

</html>

2.2 规则二:浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容

2.3 规则三：行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

==行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐==

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动的规则三</title>
  </head>
  <style>
    /* 
    float规则:浮动
      1.- 元素一旦浮动后
          - 脱离标准流
          - 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
      2.浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
          - 比如行内级元素、inline-block元素、块级元素的文字内容
      3.行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐    
    
     */
    .box {
      background-color: pink;
      /* overflow: hidden; */
      width: 400px;
    }

    .img1 {
      float: left;
    }

    .img2 {
      float: left;
    }

    .img3 {
      float: left;
    }
  </style>

  <body>
    <div class="box">
      5月4日晚，北京市广播电视局在微信公众号上发文，责令爱奇艺暂停《青春有你》第三季后续节目录制，
      要求爱奇艺认真核查并整改存在的问题。
      <img class="img1" src="../img/ysx.jpg" alt="" width="100">
      5日凌晨，爱奇艺《青春有你》官方微博回应此事，称“诚恳接受，坚决服从”，同时，
      《青春有你》第三季选手余景天所属公司星宇愔乐在微博发布退赛声明，称艺人余景天因个人身体原因，
      无法继续参与相关工作，决定退出目前的节目录制。

      5月6日夜间，爱奇艺发文道歉，称对于“倒奶视频”所造成的影响表达歉意，同时重申坚决反对一切形式的食品浪费。
      爱奇艺称，从发文即刻起，关闭《青春有你》第三季所有助力通道。
      我们真诚地道歉！

      我们听到了用户及媒体朋友批评的声音，对于此次“倒奶视频”所造成的影响，我们感到非常的内疚自责，在此，深深表达我们的歉意。同时，我们重申，坚决反对一切形式的食品浪费。
      <img class="img3" src="../img/ysx.jpg" alt="" width="100">
      我们已经并正在继续做深刻反省：作为一档综艺节目，首先必须要保证价值观导向正确，这样才能对得起大家的热爱。在节目制作和播出过程中，我们忽视了价值观导向和社会责任，忽视了节目应有的合理规则，忽视了节目缺陷可能产生的严重负面影响，我们为此负全部的责任。

      爱奇艺管理层及节目组深刻反省，将以最严格的标准、最有力的措施，保证节目的正确导向，为用户和社会奉献健康和优秀的作品。

      《青春有你3》节目整改措施如下：

      1、原定5月8日的成团之夜停止录制和直播，节目组继续慎重研究并调整节目规则。

      2、从即刻起，关闭《青春有你3》所有助力通道。
      <img class="img2" src="../img/ysx.jpg" alt="" width="100">

      3、对于已经购买商家“活动装产品”但未使用的用户，平台和商家共同协商，确保妥善解决，相关细则将在《青春有你3》的官方微博公布。

      我们继续认真努力，让未来的节目更健康，规则和流程更合理。一路走来，爱奇艺离不开社会和用户的关爱。未来，我们不会辜负社会和用户的期望，积极承担平台主体责任，创造价值观正确和健康的好内容，回报大家。

      再次，我们真挚道歉，也对所有关心和爱护爱奇艺的朋友，真诚地说一句：对不起！我们错了。我们继续深刻反思，努力通过更健康的作品，给社会带来更多的正能量。

      爱奇艺及《青春有你3》节目组
    </div>
  </body>

</html>

2.4 理解前面的规则

<style>
    .box {
      /* height: 400px; */
      background-color: pink;
    }

    .div1 {
      width: 100px;
      height: 100px;
      background-color: purple;
      float: left;
    }

    .div2 {
      /* display: inline-block; */
      width: 200px;
      height: 200px;
      background-color: rgb(26, 128, 0);
      float: left;
    }
  </style>

  <body>
    <div class="box">
      <div class="div1">盒子1</div>
      <div class="div2">盒子2</div>
    </div>
  </body>

2.5 规则四：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

<style>
    /* 
    如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

    */
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      float: left;
    }
  </style>

  <body>
    <div class="box">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
    </div>
  </body>

2.6 规则五：浮动元素之间不能层叠

浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（==左浮找左浮，右浮找右浮==）
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动的规则五</title>
  </head>
  <style>
    /* 
    规则四：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
    规则五：浮动元素之间不能层叠

           - 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素
           （左浮找左浮，右浮找右浮）
           - 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

    */
    .box {
      width: 350px;
      height: 400px;
      background-color: pink;
    }

    .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: blue;
      float: left;
    }

    .box3 {
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      float: left;
    }
  </style>

  <body>
    <div class="box">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>
  </body>

</html>

2.7 规则六：浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

<style>
    /* 
    规则四：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
    规则五：浮动元素之间不能层叠

           - 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素
           （左浮找左浮，右浮找右浮）
           - 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
    规则六：浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端


    */
    .box {
      width: 350px;
      height: 700px;
      background-color: pink;
    }

    .box1 {
      width: 200px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .box2 {
      width: 250px;
      height: 150px;
      background-color: blue;
      float: left;
    }

    .box3 {
      width: 50px;
      height: 400px;
      background-color: yellowgreen;
      float: left;
    }
  </style>

  <body>
    <div class="box">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>
  </body>

三. 元素层叠的关系

定位元素会层叠在浮动元素上面

标准元素：标准流中的元素不存在层叠
定位元素：定位元素会层叠在标准元素上面
- 定位元素之间可以用z-index调整
- 前提：必须是定位元素-非static
浮动元素：float:left/right

==从下向上的层叠顺序：标准元素->浮动元素->定位元素==

四. 浮动练习

4.1 练习一：两列布局

4.1.1 margin-left不是相等的(京东)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习一：浮动布局</title>
    <link rel="stylesheet" href="../css/reset.css">
  </head>
  <style>
    /* 
    这种没有将中间的间隔平分，而是靠两边的是5px,中间的是10px
    
     */
    body {
      background-color: #ccc;
    }

    .content {
      width: 1200px;
      height: 664px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    .content>.wrap {}

    .item {
      width: 230px;
      height: 322px;
      background-color: #fff;
      margin: 0 5px 10px;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
    }

    .item>img {
      width: 230px;
      margin-bottom: 5px;
    }

    .item>span {
      display: block;
      height: 30px;
      /* background-color: yellow; */
      margin-bottom: 5px;
    }
  </style>

  <body>

    <div class="content">
      <div class="wrap">
        <ul>
          <li class="item item1"><img src="../image/belle.png" alt=""><span>女鞋</span><span>￥100</span></li>
          <li class="item item2"><img src="../image/bra.png" alt=""><span>女凶</span><span>￥100</span></li>
          <li class="item item3"><img src="../image/phone.png" alt=""><span>手机</span><span>￥100</span></li>
          <li class="item item4"><img src="../image/unbrella.png" alt=""><span>雨伞</span><span>￥100</span></li>
          <li class="item item5"><img src="../image/cleaner.png" alt=""><span>吸层器</span><span>￥100</span></li>
          <li class="item item6"><img src="../image/t-shikt.png" alt=""><span>T恤</span><span>￥100</span></li>
          <li class="item item7"><img src="../image/buddy.png" alt=""><span>大佛</span><span>￥100</span></li>
          <li class="item item8"><img src="../image/belle.png" alt=""><span>女鞋</span><span>￥100</span></li>
          <li class="item item9"><img src="../image/wacther.png" alt=""><span>手表</span><span>￥100</span></li>
          <li class="item item10"><img src="../image/err.png" alt=""><span>耳机</span><span>￥100</span></li>
        </ul>
      </div>
    </div>
  </body>

</html>

4.2.2 等分练习：直接在每组最后的类设置margin-right:0

第一种平分方法：直接在每组最后的添加一个类，然后给每组最后一个类设置margin-right:0

 <style>
    /* 
    第一种平分方法：直接在每组最后的添加一个类，然后给每组最后一个类设置margin-right:0
    
     */
    body {
      background-color: #ccc;
    }

    .content {
      width: 1200px;
      height: 664px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    .content>.wrap {}

    .item {
      width: 230px;
      height: 322px;
      background-color: #fff;
      /* margin: 0 5px 10px; */
      margin-right: 12.5px;
      margin-bottom: 10px;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
    }

    .item5 {
      margin-right: 0px;
    }

    .item10 {
      margin-right: 0;
    }

    .item:hover {
      transform: scale(1.1);
    }

    .item>img {
      width: 230px;
      margin-bottom: 5px;
    }

    .item>span {
      display: block;
      height: 30px;
      /* background-color: yellow; */
      margin-bottom: 5px;
    }
  </style>

4.2.3 等分练习：nth-child( 5n)

<style>
    /* 
    第一种平分方法：直接在每组最后的添加一个类，然后给每组最后一个类设置margin-right:0
    第二种平分方法：nth-child(5n)
     */
    body {
      background-color: #ccc;
    }

    .content {
      width: 1200px;
      height: 664px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    .content>.wrap {}

    .item {
      width: 230px;
      height: 322px;
      background-color: #fff;
      /* margin: 0 5px 10px; */
      margin-right: 12.5px;
      margin-bottom: 10px;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
    }

    .item:nth-child(5n) {
      margin-right: 0px;
    }


    .item:hover {
      transform: scale(1.1);
    }

    .item>img {
      width: 230px;
      margin-bottom: 5px;
    }

    .item>span {
      display: block;
      height: 30px;
      /* background-color: yellow; */
      margin-bottom: 5px;
    }
  </style>

4.2.4 等分练习：margin-right设置负数

==container固定宽度->wrap不设宽度+margin-right负值->很多item==

<style>
    /* 
    第一种平分方法：直接在每组最后的添加一个类，然后给每组最后一个类设置margin-right:0
    第二种平分方法：nth-child(5n)
    第三种平分方法：给里面的wrap的margin-right设置为负
     */
    body {
      background-color: #ccc;
    }

    .content {
      width: 1200px;
      height: 664px;
      background-color: pink;
      margin: 0 auto;
    }

    .content>.wrap {
      /* 
      最重要
       */
      margin-right: -12.5px;
    }

    .item {
      width: 230px;
      height: 322px;
      background-color: #fff;
      margin-right: 12.5px;
      margin-bottom: 10px;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
    }


    .item:hover {
      transform: scale(1.1);
    }

    .item>img {
      width: 230px;
      margin-bottom: 5px;
    }

    .item>span {
      display: block;
      height: 30px;
      /* background-color: yellow; */
      margin-bottom: 5px;
    }
  </style>

  <body>

    <div class="content">
      <div class="wrap">
        <ul>
          <li class="item"><img src="../image/belle.png" alt=""><span>女鞋</span><span>￥100</span></li>
          <li class="item"><img src="../image/bra.png" alt=""><span>女凶</span><span>￥100</span></li>
          <li class="item"><img src="../image/phone.png" alt=""><span>手机</span><span>￥100</span></li>
          <li class="item"><img src="../image/unbrella.png" alt=""><span>雨伞</span><span>￥100</span></li>
          <li class="item"><img src="../image/cleaner.png" alt=""><span>吸层器</span><span>￥100</span></li>
          <li class="item"><img src="../image/t-shikt.png" alt=""><span>T恤</span><span>￥100</span></li>
          <li class="item"><img src="../image/buddy.png" alt=""><span>大佛</span><span>￥100</span></li>
          <li class="item"><img src="../image/belle.png" alt=""><span>女鞋</span><span>￥100</span></li>
          <li class="item"><img src="../image/wacther.png" alt=""><span>手表</span><span>￥100</span></li>
          <li class="item"><img src="../image/err.png" alt=""><span>耳机</span><span>￥100</span></li>
        </ul>
      </div>
    </div>
  </body>

4.2 float练习二：解决border重合

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float练习二：让border线重合</title>
  </head>
  <style>
    .container {
      width: 1100px;
      height: 218px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    h3 {
      /* line-height: 30px; */
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      /* 
      让所有的浮动元素都能排在一行，margin-right:-10px
       */
      margin-right: -10px;
    }

    ul>li {
      width: 220px;
      height: 167px;
      /* background-color: red; */
      float: left;
      border: 1px solid #ccc;
      text-align: center;
      margin-right: -1px;
    }

    ul>li>img {
      margin-top: 20px;
    }
  </style>

  <body>
    <div class="container">
      <h3>热卖品牌</h2>
        <ul>
          <li><img src="../image/nike.jpg" alt=""></li>
          <li><img src="../image/under.jpg" alt=""></li>
          <li><img src="../image/adidas.jpg" alt=""></li>
          <li><img src="../image/s.jpg" alt=""></li>
          <li><img src="../image/newbalance.jpg" alt=""></li>
        </ul>
    </div>
  </body>

</html>

五. 浮动存在的问题

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
清浮动的目的是
- 让父元素计算总高度的时候，把浮动子元素的高度算进去

六.清除浮动

给父元素设置固定高度
- 扩展性不好（不推荐）
在父元素最后增加一个空的块级子元素，并且让它设置clear: both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）
在父元素最后增加一个br标签：<br clear="all">
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）

给父元素增加::after伪元素

纯CSS样式解决，结构与样式分离（推荐）

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
  </head>
  <style>
    /* 
    一.浮动导致的问题
      - 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
      - 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
      - 解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
      - 清浮动的目的是
        - 让父元素计算总高度的时候，把浮动子元素的高度算进去
    二.解决浮动的办法
      1.给固定高度
      2.clear:both/left/right
      3.<br clear="all">    
     */
    .container {
      width: 1100px;
      /* height: 218px; */
      background-color: pink;
      margin: 0 auto;
    }

    h3 {
      /* line-height: 30px; */
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      /* 
      让所有的浮动元素都能排在一行，margin-right:-10px
       */
      margin-right: -10px;
    }

    ul>li {
      width: 220px;
      height: 167px;
      /* background-color: red; */
      float: left;
      border: 1px solid #ccc;
      text-align: center;
      margin-right: -1px;
    }

    ul>li>img {
      margin-top: 20px;
    }

    /* 
    清除浮动最优写法：伪元素放进类里
     */
    .clear-fix::after {
      content: '';
      clear: both;
      display: block
    }
  </style>

  <body>
    <div class="container clear-fix">
      <h3>热卖品牌</h2>
        <ul>
          <li><img src="../image/nike.jpg" alt=""></li>
          <li><img src="../image/under.jpg" alt=""></li>
          <li><img src="../image/adidas.jpg" alt=""></li>
          <li><img src="../image/s.jpg" alt=""></li>
          <li><img src="../image/newbalance.jpg" alt=""></li>
        </ul>
    </div>
    <!-- <div style="clear:both"></div> -->
    <!-- <br clear="all"> -->
    <p>
      美国的纽交所，终究还是坚持要中国三大电信运营商在该所的存托股票退市。

      中国移动、中国电信、中国联通三大运营商都有在港股上市，美股上市的股份比例非常低。纽交所要求这几家中国企业退市的行为，打压的象征意义更大。在此背景下，中国电信更是向A股递交了上市申请。
    </p>
  </body>

</html>

6.1 clear

clear的常用取值
1. left：要求元素的顶部低于之前生成的所有左浮动元素的底部
2. right：要求元素的顶部低于之前生成的所有右浮动元素的底部
3. both：要求元素的顶部低于之前生成的所有浮动元素的底部
4. none：默认值，无特殊要求
一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠

七.定位方案对比

定位方案	应用场景
normal flow（标准流）	垂直布局
absolute positioning（绝对定位）	层叠布局
float（浮动）	水平布局