自学内容网 自学内容网
自学内容网 > 正文

浮动基础知识以及案例(后续出进阶）

🕗 发布于 2024-11-12 23:07 css  html  前端  

1.1 认识浮动

float属性可以指定一个元素应沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它

  • float属性最初只用于在一段文本内浮动图像，实现文字环绕的效果
  • 但是早期的CSS标准中没有提供好的左右布局方案，因此在一段时间里面它成为网页多列布局的最常用工具
    • 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
  • 可以通过float属性让元素产生浮动的效果，float的常用取值
    1. none:不浮动，默认值
    2. left:向左浮动
    3. right：向右浮动

1.2 浮动的规则

规则一：元素一旦浮动后，就脱离标准流

  • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
  • 定位元素会层叠在浮动元素上面
  <style>
    body{
      margin: 0;
      overflow:0;
    }
  .item1, .item2{
background-color: #f00;
  }
  
  .item1{
    float:left;
    /* 定位脱标 */
    position: fixed;
    /* left:0;
    top:0; */
    background-color: #0f0;
    /* top:10px;*/
  } 
  .item2{
float:right;
  }
  .box{
    width:200px;
    height: 200px;
    margin:0 auto;
    background-color:orange;
  }
  </style>
</head>
<body>
  <div class="box">
      <div class="item1">1</div>
      <div class="item2">2</div>
  </div>

image-20241110171901895

image-20241110172136568

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

image-20241110172208306

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

  • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
  • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到右充足的空间为止
  <style>
    .container{
      width:500px;
      height:500px;
      background-color: orange;
    }
  .item{
    width:100px;
    height:100px;
    background-color: #f00;
    /* float:left; */
  }
.box1{
  float:left;
  background-color: #0f0;
  margin-left:10px;
}
  .box2{
    float:left;
  }
  .box3{
    float:left;
  }
  .box4{
  float:left;
  width:200px;
  height: 100px;
  background-color: purple;
  
}

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

image-20241110173443315

浮动规则四：浮动元素不能与行内级内容层叠，行内几内容将会被浮动元素推出

  • 比如行内级元素、inline-block元素、块级元素的文字内容
  <style>
  .box{
    width:400px;
    height:400px;
    background-color: orange;

  }
  strong{
    /* 浮动规则四：浮动元素不能与行内级内容层叠，行内几内容将会被浮动元素推出 */
    float:left;
    
  }
  
  </style>
  
</head>
<body>
  <div class="box">
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
    <i>我也是i元素</i>
    <div>我也是普通的内容</div>
  </div>
</body>

图文混排

<style>
  .box{
    width:500px;
    background-color:orange;
  }
  img{
    width:200px;
    height: 200px;
    /* 只能向左浮动或者向右浮动 */
    float: left;

    
  }
  
  </style>
</head>
<body>
  <div class="box">
      <img src="../images/muxing.jpg" alt="">
      但是我们在开发过程中肯定会遇到，将基本数据类型转换为String类型，或者其他数据类型，而这个时候如果我们要用基础数据类型实现这些转换就会非常麻烦，所以Java就有了基本数据类型的包装类，顾名思义，包装类就是：将基本数据类型包装成对象，使其具有了对象的属性和方法。
      这样就可以使用方法和属性了。
      
      而包装类的主要作用也就是：
      黄岩岛是中国固有领土。中国政府根据《联合国海洋法公约》等国际法及《中华人民共和国领海及毗连区法》，划定并公布黄岩岛领海基线，是中国政府依法加强海洋管理的正常举措，符合国际法和国际惯例。
　　菲律宾颁布所谓“海洋区域法”，企图以国内立法形式固化南海仲裁案非法裁决，把中国黄岩岛和南沙群岛大部分岛礁及相关海域非法纳入其海洋区域，严重侵犯中方在南海的领土主权和海洋权益。中方对此坚决反对，将继续依法采取一切必要措施，坚定捍卫国家领土主权和海洋权益。
      将本类型与其他类型进行转换；
      将字符串与本类型及包装类型相互转换。
    
  </div>

image-20241110192605694

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

image-20241110192744800

1.3 浮动的案例

1.3.1 解决行内级元素的水平间隙问题

  <style>
  span{
    background-color:orange;
    /* font-size:16px; */
    float:left;
  
  }
  /* .box{
    font-size:0
  } */
  
  </style>
</head>
<body>
  <div class="box">
    <!-- 换行符会产生空格 -->
    <!-- 将多个行内级元素中间的空格（间隙）去除的方法
    1.删除换行符（不推荐）
    2.将父级元素的font-size设置为0，但是需要将子元素设置回来
    3.通过子元素（span）统一向一个方向浮动 -->
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>

  </div>
</body>

1.3.2 浮动练习一:百度页码问题

浮动常用的场景

解决行内级元素、inline-block元素的水平间隙问题

image-20241110193857021

  <style>
  ul,li{
    list-style:none;
    padding:0;
    margin:0;
  }
 body{
   background-color: #f2f2f2;
   
 }
  a{
    text-decoration: none;
   
  }
  /* 内容样式 */
  ul>li{
    
    float:left;
    margin-left: 10px;
  }
  ul>li>a{
    display: inline-block;
    width:36px;
    height:36px;
    line-height: 36px;
    text-align: center;
    border-radius: 6px;
    background-color: #fff;
    color:#3951b3;
  }
  /* 并集选择器也可以 */
  ul>li>a:hover{
  background-color: blue;
  color:#fff;
  }
  ul>li.active>a{
    background-color: blue;
  color:#fff;
  }
  ul>li.next{
    width:80px;
  
  }
  ul>li>a.next{
    width:80px;
  }
  </style>
</head>
<body>
  <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"><a href="#">5</a></li>
    <li class="item"><a href="#">6</a></li>
    <li class="item active"><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 "><a class="next" href="#">下一页 &gt;</a></li>
  </ul>

</body>

原文地址：https://blog.csdn.net/Yihong1833100198/article/details/143724600

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024