CSS布局-浮动

最新推荐文章于 2024-07-18 22:20:03 发布

小袁儿

最新推荐文章于 2024-07-18 22:20:03 发布

阅读量503

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_42535142/article/details/135412268

版权

一、认识浮动

二、浮动规则一

三、浮动规则二

<!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>
    body {
      margin: 0;
      overflow: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: orange;
      margin: 0 auto;
      padding: 10px;
    }

    .item1, .item2 {
      background-color: #f00;
    }

    .item1 {
      /* 定位脱离标准流 */
      /* position: fixed;
      left: 0;
      top: 10px; */

      /* 脱离标准流 */
      float: left;
      background-color: #0f0;
    }

    .item2 {
      float: right;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
  </div>

</body>
</html>

四、浮动规则三

<!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>

    .container {
      width: 500px;
      height: 500px;
      background-color: orange;
    }

    .item {
      background-color: #f00;
      width: 100px;
      height: 100px;

      /* 三个全部向左浮动: 都会脱离标准流 */
      /* float: left; */
    }

    .box1 {
      float: left;
      background-color: #0f0;
      margin-left: 20px;
    }

    .box2 {
      float: left;
    }

    .box3 {
      float: left;
    }

    .box4 {
      width: 200px;
      height: 100px;
      background-color: purple;

      float: left;
    }
  </style>
</head>
<body>
  
  <!-- 浮动元素之间不能层叠 -->
  <div class="container">
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>

    <div class="item box4">4</div>
  </div>

</body>
</html>

五、浮动规则四

<!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>
    .box {
      width: 1000px;
      height: 400px;
      background-color: orange;
    }

    .box strong {
      float: left;
      /* position: fixed;
      left: 0; */
    }
  </style>
</head>
<body>
  
  <div class="box">
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
    <i>我也是i元素</i>
    <div>我是普通的内容</div>
  </div>

</body>
</html>

<!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>
    .box {
      width: 500px;
      background: orange;
    }

    .box img {
      width: 300px;
      float: left;
    }
  </style>
</head>
<body>

  <div class="box">
    <img src="../images/kobe01.jpg" alt="">
    马俊宝从小热爱摄影，人生中第一部照相机是1978年买的海鸥相机，当时花了他将近半年的积蓄。从拿着相机的那一刻起，他就有一个梦想：把新疆最美的风景记录下来，让更多人看到。这个梦想在他年过半百的时候终于实现了。他的作品经常有爆款，不少视频有上亿观看量。留言里很多人赞叹新疆太美了，也有人不相信这些湖泊草原在新疆。马俊宝很开心：“我想做新疆美景的展示者，把新疆最美的一面展现给大家。”
    为了拍美食，张振新几乎跑遍了全疆，短视频的题材有大家熟悉的，也有粉丝留言推荐的，还有在网上搜索看到的。他会为了拍一种美食，乘飞机转汽车，辗转上千公里。从北疆的糖洋芋、土鸡焖饼子，再到南疆的鸽子汤、烤鱼、烤鸽子，每到一地，张振新都会和当地人聊天，听听当地人会去哪家老字号。他拍的店大多虽不起眼，但都是味道正宗、历久弥新的“宝藏店”。
  </div>

</body>
</html>

六、浮动规则五

七、浮动练习一

<!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>
    .box {
      /* font-size: 0; */
      /* display: flex; */
    }

    span {
      background-color: orange;
      /* font-size: 16px; */

      /* float: left;
      margin-right: 5px; */
    }
  </style>
</head>
<body>
  <!-- 
    将多个行内级元素中间的空格(间隙)去除的方法
      1. 删除换行符(不推荐)
      2. 将父级元素的font-size设置为0, 但是需要子元素设置回来
      3. 通过子元素(span)统一向一个方向浮动即可
      4. flex布局(还没有学习)
   -->
  
  <div class="box">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </div>

</body>
</html>

<!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>
    /* 样式的重置 */
    ul, li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    /* 全局设置 */
    body {
      background-color: #f2f2f2;
    }

    /* 内容样式 */
    ul > li {
      float: left;
      margin-left: 12px;
    }

    ul > li > a {
      display: inline-block;
      width: 36px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-radius: 6px;
      background-color: #fff;
      color: #3951b3;
      font-size: 14px;
    }

    ul > li > a:hover, ul > li.active > a {
      background-color: blue;
      color: #fff;
    }

    ul > li.next > a {
      width: 80px;
    }

  </style>
</head>
<body>
  
  <!-- 结构: HTML -->
  <ul>
    <li class="item"><a href="#">1</a></li>
    <li class="item"><a href="#">2</a></li>
    <li class="item"><a href="#">3</a></li>
    <li class="item"><a href="#">4</a></li>
    <li class="item active"><a href="#">5</a></li>
    <li class="item"><a href="#">6</a></li>
    <li class="item"><a href="#">7</a></li>
    <li class="item"><a href="#">8</a></li>
    <li class="item"><a href="#">9</a></li>
    <li class="item"><a href="#">10</a></li>
    <li class="item next"><a href="#">下一页 &gt;</a></li>
  </ul>

</body>
</html>

八、浮动练习二

<!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>
    /* 公共的class */
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }

    /* 布局样式 */
    .box {
      /* margin: 0 -5px; */
      /* 3.方案三: 设置负的的margin(没有兼容性) */
      margin-right: -10px;
    }

    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;

      /* 浮动 */
      float: left;
      margin-right: 10px;
      /* margin: 0 5px; */
    }

    /* 1.有可能存在兼容性 */
    /* .item:nth-child(5n) {
      margin-right: 0;
    } */
    
    /* 2.麻烦一点点 */
    /* .item.last-item {
      margin-right: 0;
    } */
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </div>

</body>
</html>

九、浮动练习三

<!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: 1190px;
      margin: 0 auto;
      background-color: #f00;
      height: 1000px;
    }

    .wrapper {
      margin-right: -10px;
    }

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="wrapper">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
    </div>
  </div>

</body>
</html>

十、浮动练习四

<!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: #ccc;
    }

    .box {
      /* margin-left: 1px; */
    }

    .item {
      width: 221px;
      height: 168px;
      background: orange;
      color: #fff;

      float: left;

      border: 1px solid #000;
      margin-right: -1px;

      box-sizing: border-box;
    }

    .item.first {
      width: 220px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

</body>
</html>

<!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>
    span, strong {
      float: left;
    }

    span {
      background-color: #f00;
    }

    strong {
      background-color: #0f0;
      margin-left: -10px;
    }
  </style>
</head>
<body>
  
  <span>我是span元素</span>
  <strong>我是strong元素</strong>

</body>
</html>

十一、浮动的问题 – 高度塌陷

十二、CSS属性 - clear

十三、清除浮动的方法

十四、方法三 – 伪元素清除浮动

<!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: 1190px;
      margin: 0 auto;
      background: #f00;
    }

    .wrapper {
      margin-right: -10px;
    }

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }

    /* 其他的内容 */
    .other {
      height: 100px;
      background: #0f0;
    }

    .line {
      /* height: 10px; */
      /* background: blue; */
      clear: both;
    }

    /* 最终的解决方案 */
    .clear_fix::after {
      content: "";
      clear: both;
      display: block;

      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }

    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }
  </style>
</head>
<body>
  
  <!-- 因为所有的后代item元素都是浮动的, 脱离标准流 -->
  <!-- 不会向父元素汇报高度, 那么content元素压根就没有高度 -->
  <div class="content">
    <div class="wrapper clear_fix">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>

      <!-- <div class="line"></div> -->
    </div>
  </div>
  
  <div class="content">
    <div class="wrapper clear_fix">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>

      <!-- <div class="line"></div> -->
    </div>
  </div>

  <!-- 我认为content没有高度, 那么我们就会直接在上面显示 -->
  <div class="other"></div>

</body>
</html>

十五、布局方案总结

小袁儿

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS布局-浮动

目录一、认识浮动二、浮动规则一三、浮动规则二四、浮动规则三五、浮动规则四六、浮动规则五七、浮动练习一八、浮动练习二九、浮动练习三十、浮动练习四十一、浮动的问题 – 高度塌陷十二、CSS属性 - clear十三、清除浮动的方法十四、方法三 – 伪元素清除浮动十五、布局方案总结
复制链接

扫一扫