HTML + CSS 连载 | 59 - 元素浮动规则(上)

本文详细解释了CSS浮动元素的层叠原理,通过实例说明浮动元素如何影响元素布局,包括浮动元素之间的关系、脱离标准流但保持文本流的影响,以及当元素宽度超出包含块时的动态调整。
摘要由CSDN通过智能技术生成

html+css.jpeg

一、元素浮动规则

本文紧接上篇文章来讲述第三个浮动的规则,即 浮动元素之间不能层叠;如果一个元素浮动而另一个元素已经在那个位置了,后面浮动的元素将会紧贴着前一个浮动元素,也就是左浮动找左浮动,右浮动找右浮动。

如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止。

image.png

浮动元素不能层叠

首先创建一个 HTML 页面,该页面中包含了三个 div.item,分别给它们设置宽高以及不同的背景颜色,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .item {
      width: 100px;
      height: 100px;
    }

    .box1 {
      background-color: #f00;
    }

    .box2 {
      background-color: #ff0;
    }

    .box3 {
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div class="item box1">1</div>
  <div class="item box2">2</div>
  <div class="item box3">3</div>
</body>
</html>

在浏览器中打开 HTML 页面,效果如下:

image.png

先给这三个 div.item 全部设置左浮动,具体代码如下:

.item {
  width: 100px;
  height: 100px;
  /*设置左浮动*/
  float: left;
}

刷新浏览器,效果如下:

image.png

全部设置左浮动之后,三个盒子全部靠左边横向排列;虽然脱离了标准流,但是并没有出现层叠的现象,接着我们注释全部左浮动的设置,单独给 div.box1 设置左浮动,具体代码如下:

.item {
  width: 100px;
  height: 100px;
  /*设置左浮动*/
  /* float: left; */
}

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

刷新浏览器,效果如下:

image.png

div.box2 设置一个左外边距 20px:

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

刷新浏览器,效果如下:

image.png

div.box1 设置了浮动之后会脱离标准流,但是 div.box1 中的内容会占据位置,也就是并没有脱离文本流,所以 div.box2 的内容并没有占据 div.box1 的位置。

float 浮动的元素可以脱离标准文档流,摆脱块级元素和行内元素的限制,但是没有脱离文本流,因此仍然会占据位置,其他的文本内容会按照顺序继续排列。

接着给 div.box2 设置左浮动:

.box2 {
  float: left;
  background-color: #ff0;
}

刷新浏览器,效果如下:

image.png

同样的现象 div.box1div.box2 脱离标准流,但是没有脱离文本流;接着给 div.box3 也设置左浮动:

.box3 {
  float: left;
  background-color: #0f0;
}

刷新浏览器,效果如下:

image.png

水平方向剩余的空间不够显示浮动元素则浮动元素将向下移动

我们先给三个 div.item 在外面嵌套一个 div.container

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

然后给这个 div.container 设置具体的宽高和背景颜色:

.container {
  width: 500px;
  height: 500px;
  background-color: #f0f;
}

刷新浏览器,效果如下:

image.png

接着我们在 div.container 中在增加一个 div.box4

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

并且给 div.box4 设置一个比较大的宽,这个四个 div.item 的宽加起来就会大于 div.container 的宽:

.box4 {
  width: 200px;
  height: 100px;
  background-color: #00f;
}

刷新浏览器,效果如下:

image.png

div.box4 设置一个左浮动:

.box4 {
  width: 200px;
  height: 100px;
  background-color: #00f;
  float: left;
}

刷新浏览器,效果如下:

image.png

当全部设置了左浮动之后 div.item 的总的宽度超过了包含块的宽度,就会自动向下一行移动,直到有充足的空间显示为止,因此可以看到 div.box4 在下一行显示,因为第一行已经没有足够的空间来显示了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值