浮动

大帅子
159 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下浮动吧帮大家回忆一下逝去的青春

顺便给大家聊一下浮动出现是为了解决什么问题的,浮动最开始的时候出现就是解决图文环绕的问题,然后最后的时候就发现还能开始布局,也就演化成了浮动布局,这就是一个浮动的发展史

那好,话不多说,接下来就给大家讲一下浮动的一些具体用法

1. 浮动属性

浮动的属性就是以下两种,分为 左浮动 跟 右浮动

 float: left;
 
 float: right;

2.用法

  1. 因为块元素是一行显示的,我们这时候如果想让块元素一行显示多个呢,就可以给两个块元素同时去浮动,跟转行内块的用法差不多display: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>
    .box1,
    .box2 {
      width: 200px;
      height: 200px;
      
      float: left;
    }

    .box2 {
      background-color: green;
    }
  </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>

</html>

image.png

  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>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      float: left;

    }

    .box2 {
      width: 300px;
      height: 300px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>

</html>

image.png

3.注意点

讲完了用法跟属性之后,我们讲一下注意点

  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>
  .fl {
    width: 300px;
    height: 300px;
    background-color: red;
  }

  .box1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;

  }

  .box2 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: green;
  }
</style>
</head>

<body>
<div class="fl">
  <div class="box1">1</div>
  <div class="box2">2</div>
</div>

</body>

</html>

image.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>
    .fl {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;

    }

    .box2 {
      float: right;
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="fl">
    <div class="box1">1</div>
    <div class="box2">2</div>
  </div>

</body>

</html>

image.png

4.清除浮动的几种方式

上面刚讲过了,如果我们上面的盒子浮动的时候下面的盒子不浮动就会出现下面的盒子上去的情况,所以我们这个时候就是浮动带来的负面效应

  1. 就是给浮动的盒子设置高度

  2. 多设置一个空的div ,然后设置 clear: both;;

  3. 加一个类名,设置伪元素,用的时候直接添加类名;

    .box:after {
    content:"";
    display:inline-block;
    clear: both;
}

  4. 给父盒子设置overflow:hidden

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!
avatar
文章
阅读
粉丝