认识浮动布局

最新推荐文章于 2024-08-12 17:51:29 发布

小林芝คิดถึง

最新推荐文章于 2024-08-12 17:51:29 发布

阅读量95

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/coderlhj666/article/details/125522658

版权

浮动布局

一、认识浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
- float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
- 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具；
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
可以通过float属性让元素产生浮动效果，float的常用取值
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动

二、浮动规则

浮动规则一
- 元素一旦浮动后, 脱离标准流
  - 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
  - 定位元素会层叠在浮动元素上面
浮动规则二
- 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

<!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;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 300px;

      margin: 0 auto;

      background-color: yellow;
      position: relative;
    }

    .box1 {
      float: left;
      background-color: #f00;
    }

    .box2 {
      float: right;
      background-color: #0f0;
    }

    .box span {
      position: absolute;
      left: 0;
      top: 0;
      background-color: bisque;
    }
  </style>

</head>

<body>
  <div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <span>133</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>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: aqua;
    }

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

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

    .box2 {
      float: left;
    }

    .box3 {
      float: left;
      width: 200px;
      background-color: #00f;
    }
  </style>

</head>

<body>

  <div class="box">
    <div class="box1 item">1</div>
    <div class="box2 item">2</div>
    <div class="box3 item">3</div>
  </div>

</body>

</html>

浮动规则四

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、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>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #f00;
    }

    .box strong {
      float: left;
    }
  </style>

</head>

<body>

  <div class="box">
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
    <div>我是块级元素</div>
  </div>

</body>

</html>

浮动规则五
- 行内级元素、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>Document</title>

  <style>
    .box {
      color: #000;
      /* font-size: 0; */
      /* display: flex; */
    }

    .box span {
      background-color: #0f0;
      float: left;
      /* font-size: 16px; */

      /* 空隙的产生原因：是元素换行之间的空格被浏览器识别解析为空格导致
        1、删掉元素之间换行（不推荐）
        2、父元素设置font-size为0，子元素重新设置font-size大小
        3、使用浮动，统一方向浮动
        4、使用flex布局
      */
    }
  </style>

</head>

<body>

  <div class="box">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </div>

</body>

</html>

四、浮动的问题 –高度塌陷

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
清浮动的目的是
- 让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清除浮动呢? 使用clear属性
- clear属性是做什么的呢?
  - clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
  - clear的常用取值
    - left：要求元素的顶部低于之前生成的所有左浮动元素的底部
    - right：要求元素的顶部低于之前生成的所有右浮动元素的底部
    - both：要求元素的顶部低于之前生成的所有浮动元素的底部
    - none：默认值

1.清除浮动的方法

事实上我们有很多方法可以清除浮动
方法一: 给父元素设置固定高度
- 扩展性不好（不推荐）
方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）

方法三: 给父元素添加一个伪元素

推荐;
编写好后可以轻松实现清除浮动;
给父元素增加::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>Document</title>

  <style>
    /*
      解决高度塌陷的问题
      
     */
    .wrap {
      background-color: #f00;
      /* 方式一：给父元素固定高度（不推荐）  */
      /* height: 300px; */

    }

    /* 方式三：给父元素添加一个伪元素（推荐） 
      写好后可以轻松实现清除浮动;
      */
    .clear-fix::after {
      content: "";
      display: block;
      clear: both;

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

    .clear-fix {
      *zoom: 1;
      /* 兼容6、7 */
    }

    .box {
      width: 100px;
      height: 200px;
      background-color: #0f0;
      /* 浮动 */
      float: left;
    }

    /* 方式二：给父元素最后增加一个空的块级子元素，并且让它设置clear: both（不推荐）  
        增加很多无意义的标签
       违反了结构与样式分离的原则
     */
    /* .clear {
      clear: both;
    } */
  </style>

</head>

<body>

  <div class="wrap clear-fix">
    <div class="box">哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
    <!-- <div class="clear"></div> -->
  </div>

</body>

</html>