阿离王带你零基础学习前端

# 浮动

# 什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

# 元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之前的元素将不会受到影响。

浮动元素之后的元素将围绕它。

如果元素是右浮动，下面的文本流将环绕在它左边：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

# 浮动属性设置

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

<div>框1</div>
<div>框2</div>
<div>框3</div>

div {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid black;
  text-align: center;
}

div:nth-of-type(1) {
  float: right;
}

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

框1左浮动例子：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>浮动</title>
      <style>
          div {
              width: 100px;
              height: 100px;
              line-height: 100px;
              border: 1px solid black;
              text-align: center;
          }
          div:nth-of-type(1) {
              float: left;
          }
      </style>
  </head>
  <body>
      <div>框1</div>
      <div>框2</div>
      <div>框3</div>
  </body>
</html>

3个框都向左浮动例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid black;
            text-align: center;
            float: left;
        }
    </style>
</head>

<body>
    <div>框1</div>
    <div>框2</div>
    <div>框3</div>
</body>
</html>

再如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        div {
            width: 45%;
            height: 150px;
            line-height: 150px;
            border: 1px solid black;
            float: left;
            text-align: center;
        }

        .box1 {
            height: 200px;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">框1</div>
    <div class="box2">框2</div>
    <div class="box3">框3</div>
</body>
</html>

行框

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box1 {
            width: 45%;
            height: 150px;
            border: 1px solid black;
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">浮动框</div>
    <p>
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
    </p>
    <p>
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
    </p>
</body>
</html>

# 清除浮动 clear 属性

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

clear 属性规定元素的哪一侧不允许其他浮动元素。clear 属性只能作用于块级元素，用来清除前面的兄弟元素浮动带来的影响。clear:left;用于清除前一个兄弟元素左浮动的影响。clear:right;用于清除前一个兄弟元素右浮动的影响。clear:both;相当于同时设置 left 和 right。

# 属性值

  • left：在左侧不允许浮动元素。
  • right： 在右侧不允许浮动元素。
  • both：在左右两侧均不允许浮动元素。
  • none：默认值。允许浮动元素出现在两侧。
  • inherit：规定应该从父元素继承 clear 属性的值。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box1 {
            width: 45%;
            height: 150px;
            border: 1px solid black;
            float: left;
            text-align: center;
        }

        .text1 {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box1">浮动框</div>
    <p class="text1">
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
    </p>
    <p class="text2">
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
    </p>
</body>

</html>

# 清除浮动方法集合

# 1. 父级 div 定义 伪类 after 和 zoom

<div class="div1 clearfix">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">div2</div>

.div1 {
  background: #000080;
  border: 1px solid red;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
  margin-top: 10px;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}

/*清除浮动代码*/

.clearfix:after {
  content: '';
  display: block;
  /*加入的这个元素转换为块级元素。*/
  clear: both;
  /*清除左右两边浮动。*/
  visibility: hidden;
  /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
  line-height: 0;
  /*行高为0；*/
  height: 0;
  /*高度为0；*/
  font-size: 0;
  /*字体大小为0；*/
}
/*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
.clearfix {
  *zoom: 1;
}
  • 原理：IE8 以上和非 IE 浏览器才支持:after，原理和方法 3 有点类似，zoom(IE 转有属性)可解决 ie6,ie7 浮动问题
  • 优点：浏览器支持好、不容易出现怪问题
  • 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
  • 建议：推荐使用，建议定义公共类，以减少 CSS 代码。

# 2. 父级 div 定义 height

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
  /*解决代码*/
  height: 200px;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
  margin-top: 10px;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}
  • 原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
  • 优点：简单、代码少、容易掌握
  • 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题
  • 建议：不推荐使用，只建议高度固定的布局时使用

# 3.结尾处加空 div 标签 clear:both

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="clearfix"></div>
</div>
<div class="div2">
  div2
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
  margin-top: 10px;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}

/*清除浮动代码*/
.clearfix {
  clear: both;
}
  • 原理：添加一个空 div，利用 css 提高的 clear:both 清除浮动，让父级 div 能自动获取到高度
  • 优点：简单、代码少、浏览器支持好、不容易出现怪问题
  • 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空 div，让人感觉很不好
  • 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

# 4.父级 div 定义 overflow:hidden;

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
  /*解决代码*/
  width: 98%;
  overflow: hidden;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
  margin-top: 10px;
  width: 98%;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}
  • 原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度
  • 优点：简单、代码少、浏览器支持好
  • 缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏。
  • 建议：只推荐没有使用 position 或对 overflow:hidden 理解比较深的朋友使用。

# 5.父级 div 定义 overflow:auto

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>

.div1 {
      background: #000080;
      border: 1px solid red;
      /*解决代码*/
      width: 98%;
      overflow: auto
    }

    .div2 {
      background: #800080;
      border: 1px solid red;
      height: 100px;
      margin-top: 10px;
      width: 98%
    }

    .left {
      float: left;
      width: 20%;
      height: 200px;
      background: #DDD
    }

    .right {
      float: right;
      width: 30%;
      height: 80px;
  • 原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:auto 时，浏览器会自动检查浮动区域的高度
  • 优点：简单、代码少、浏览器支持好
  • 缺点：内部宽高超过父级 div 时，会出现滚动条。
  • 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

# 6.父级 div 也一起浮动

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
  /*解决代码*/
  width: 98%;
  margin-bottom: 10px;
  float: left;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
  width: 98%;
  /*解决代码*/
  clear: both;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}
  • 原理：所有代码一起浮动，就变成了一个整体
  • 优点：没有优点
  • 缺点：会产生新的浮动问题。
  • 建议：不推荐使用，只作了解。

# 7.父级 div 定义 display:table;

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
  /*解决代码*/
  width: 98%;
  display: table;
  margin-bottom: 10px;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
  width: 98%;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}
  • 原理：将 div 属性变成表格
  • 优点：没有优点
  • 缺点：会产生新的未知问题。
  • 建议：不推荐使用，只作了解。

# 8.结尾处加 br 标签 clear:both;

<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <br class="clearfix" />
</div>
<div class="div2">
  div2
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
  margin-bottom: 10px;
  zoom: 1;
}

.div2 {
  background: #800080;
  border: 1px solid red;
  height: 100px;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  background: #ddd;
}

.right {
  float: right;
  width: 30%;
  height: 80px;
  background: #ddd;
}

.clearfix {
  clear: both;
}
  • 原理：父级 div 定义 zoom:1 来解决 IE 浮动问题，结尾处加 br 标签 clear:both
  • 建议：不推荐使用，只作了解。
更新时间: 2021年8月30日星期一晚上10点43分

← BFC →