14-CSS浮动

已注销
46 阅读4分钟

01 介绍

00018.png

02 浮动规则

00020.png

03 案例练习

3.1 缝隙的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">
    <span>abc</span>
    <span>123</span>
    <span>ABC</span>
  </div>
</body>
</html>

00019.png

使用浮动解决

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      float: left;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>abc</span>
    <span>123</span>
    <span>ABC</span>
  </div>
</body>
</html>

00021.png

3.2 百度页码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul>li {
      float: left;
      margin-right: 5px;
    }
    
    a {
      display: inline-block;
      text-align: center;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 8px;
      text-decoration: none;
      color: #72B5EB;
      background-color: #f5f5f6;
    }

    a.text {
      width: 80px;
    }

    a.active,
    a:hover {
      background-color: #4e6ef2;
      color: white;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <a class="active" href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li>
      <a href="#">5</a>
    </li>
    <li>
      <a href="#">6</a>
    </li>
    <li>
      <a href="#">7</a>
    </li>
    <li>
      <a href="#">8</a>
    </li>
    <li>
      <a href="#">9</a>
    </li>
    <li>
      <a href="#">10</a>
    </li>
    <li>
      <a class="text" href="#">下一页&gt;</a>
    </li>
  </ul>
</body>
</html>

00022.png

04 关于多列布局使用浮动的方法

00023.png

4.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>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
      
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    .item .box:last-child {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>
</html>

00024.png

4.2 京东多列布局方案2(不推荐)

<!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>Document</title>
  <style>
    .item {
      width: 1190px;
      height: 800px;
      margin: 0 auto;
      background-color: orange;
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      margin-right: 10px;
      background-color: red;
    }
    /* 每5个加一个last-item，但是这种方案比较麻烦 */
    .item .box:nth-child(5n){
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box last-item">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box last-item">10</div>
  </div>
</body>
</html>

00025.png

4.3 京东多列布局方案3(推荐)

<!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>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
      
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    /* 根据公式: 父级盒子的宽度=子盒子+ margin left + margin right
       这种方案就是首先要用一个盒子把元素包裹起来
    */
    .item .content {
      margin-right: -10px;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
    </div>
  </div>
</body>
</html>

00026.png

00027.png

4.4 考拉多列布局

00028.png

<!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>Document</title>
   <style>
      .content {
         width: 1100px;
         margin: 0 auto;
         height: 800px;
         background-color: #ccc;
      }
      .item {
         width: 220px;
         height: 168px;
         float: left;
         background-color: red;
         border: 1px solid #000;
      }
   </style>
</head>
<body>
   <div class="content">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</body>
</html>

效果如下 00029.png 有2个问题需要解决:

  • 第1个是由于浮动的原因，最有一个元素跑到下面来了
  • 第2个是由于设置了border，会导致元素之间有2个线的宽度

解决第2个问题,margin-left设置负值，让2条线之间重合

<!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>Document</title>
   <style>
      .content {
         width: 1100px;
         margin: 0 auto;
         height: 800px;
         background-color: #ccc;
      }
      .item {
         width: 220px;
         height: 168px;
         float: left;
         background-color: red;
         border: 1px solid #000;
         margin-left: -1px;
      }
   </style>
</head>
<body>
   <div class="content">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</body>
</html>

00030.png

解决第一个问题 00031.png

00032.png 这样看上去好像合理，但是右边会有一点突出 00033.png 这样设置以后，不论如何，都会有一边会突出一点，只能通过调整其中一个item少1px

05 浮动的塌陷问题

5.1 塌陷的现象

如果删除高度,那么最下面的那个盒子会上来,因为content中的元素都是浮动,脱离了标准元素,不会向父元素汇报高度

<!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>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      /* 如果删除高度,那么最下面的那个盒子会上来,因为content中的元素都是浮动,脱离了标准元素,不会向父元素汇报高度 */
      /* height: 500px; */
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    /* 根据公式: 父级盒子的宽度=子盒子+margin left + margin right
       这种方案就是首先要用一个盒子把元素包裹起来
    */
    .item .content {
      margin-right: -10px;
    }
    .other {
      width: 1500px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="content">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
  <div class="other"></div>
</body>
</html>

00034.png

5.2 解决塌陷问题推荐的方案

<!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>Document</title>
  <style>
    .item {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
    }
    .item .box {
      float: left;
      width: 230px;
      height: 322px;
      background-color: red;
      margin-right: 10px;
    }
    /* 根据公式: 父级盒子的宽度=子盒子+margin left + margin right
       这种方案就是首先要用一个盒子把元素包裹起来
    */
    .item .content {
      margin-right: -10px;
    }
    .clear-fix::after {
      content: "";
      clear: both;
      display: block;
      /* 加上浏览器的兼容性 */
      visibility: hidden;
      height: 0;
    }
    .clear-fix {
      /* 兼容IE6/IE7 */
      *zoom: 1;
    }
    .other {
      width: 1500px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="content clear-fix">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
  <div class="other"></div>
</body>
</html>

5.3 解决塌陷问题的本质

00035.png

avatar
文章
阅读
粉丝