4. 浮动 - 不凡学院web前端

1. 为什么需要“浮动”
2. “浮动”是怎么用的，有什么表现效果
2.1 放不下会换行
2.2 被卡住的情况
2.3 当浮动元素与文本有交集的时候
2.4 浮动元素脱离了文档流(浮动的影响)
2.5 块级元素浮动宽度收缩，行内元素浮动以块级特性去呈现
3. 清除“浮动”影响
3.1 为什么要清除浮动
3.2 清除浮动的方法
4. 总结

1. 为什么需要“浮动”

假设我们需要有个东西，然后它的排版不是依照盒模型的定义——从上往下依次排列，而是从左到右这种结构，那么我们需要考虑到使用浮动。

浮动可以帮助我们让块元素同行展示。

2. “浮动”是怎么用的，有什么表现效果

2.1 放不下会换行

一个元素浮动之后会飘起来，向左或者向右移动，直到遇到父元素的边界或者其他浮动元素停下来。如果没有足够的水平空间来浮动，它会向下移动，直到空间合适，换行展示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
  .ct {
      width: 280px;
      height: 300px;
      margin: 100px;
      border: 1px solid black;
    }
    .box {
      float: left; /* 直接在你需要浮动的元素上加 float 属性。 */
      width: 100px;
      height: 100px;
      background: red;
      color: #fff;
    }
    .box1 {
      background: blue;
    }
    .box2 {
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>

向右浮动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
/*站在浏览器的角度看，它会挨着顺序依次渲染。*/
/*改变了顺序*/

.box1 {
  background: blue;
}
.box2 {
  background: pink;
}

2.2 被卡住的情况

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>

.ct {
 width: 280px;
 height: 300px;
 border: 1px solid;
 margin: 100px;
}
.box {
  color: #fff;
 width: 100px;
 height: 100px;
 background: red;
 float: left;
}
 /*
依然站在浏览器的角度，从上往下渲染文档，
当依次渲染完 1、2 后，渲染 3 的时候，右边放不下，
然后它要被挤下去，挤下去后它贴着 2 的下边缘开始向左移动，
当移动碰到 1 右下角时，动不了了，1 被卡住了。
所以我们在设置高度不一样时，会出现一个“卡住”的问题。
 */
.box1 {
 background: blue;
 height: 120px;
}
.box2 {
 background: pink;
}

2.3 当浮动元素与文本有交集的时候

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <p>当box1浮动之后,不再占据文档流,下方元素会上移,和浮动元素产生交集.
    因为文字不和浮动元素重叠,所以文字会环绕在浮动元素周围</p>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid black;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
.box1 {
  width: 140px;
  height: 120px;
  background: blue;
}
.box2 {
  background: pink;
}

2.4 浮动元素脱离了文档流(浮动的影响)

脱离文档流是指：脱离本该在文档中的位置, 他的父容器在去计算宽高的时候，发现不了浮动元素。即父容器不会被里面的浮动元素撑开；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
  </div>
  <div class="box2">2</div>

</body>
</html>

.ct {
 width: 280px;
 border: 1px solid;
}
.box {
 width: 100px;
 height: 100px;
 background: red;
  color: #fff;
}
.box1 {
  float: left;
 background: blue;
 opacity: 0.6;
}
.box2 {
 width: 110px;
 height: 110px;
  background: pink;
}

2.5 块级元素浮动宽度收缩，行内元素浮动以块级特性去呈现

浮动元素不指定宽度,宽度由内容撑开

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">这是 div</div>
  <span>这是 span</span>
</body>
</html>

.box {
  float: left;
  color: #fff;
 background: red;
}
span {
 float: left;
 width: 100px;
 height: 50px;
 margin: 10px;
  color: #fff;
  background: blue;
}

3. 清除“浮动”影响

3.1 为什么要清除浮动

浮动元素无法撑起父元素高度,会导致父元素高度计算时出现问题,对后续元素位置产生影响

3.2 清除浮动的方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="nav clr">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</body>
</html>

.nav {
 list-style: none;
 border: 1px solid #ccc;
    /*第一种方式:严格指定父元素高度
    第二种方式:给父元素添加overflow:hidden;
    第三种方式:在所有浮动元素末尾追加一个空的块元素(借助伪元素),对其设置clear:both;*/
 /*overflow:hidden;*/
}
.nav>li {
 float: left;
 margin-left: 15px;
}
.clr::after{
  content:'';
  display:block;
  clear:both;
}

4. 总结

以后我们想去实现块元素水平排列，就有了两种方法：

第一:inline-block——适合子内容不多的元素水平排列。但要注意缝隙问题，以及对齐问题；
第二:float——没缝隙问题，适合稍大的布局。但需要解决的问题是父元素不会被撑开而导致的问题。

文档更新时间: 2023-01-05 17:14 作者：孙老师