个人中心
gpt4 book ai didi

html - float 元素在包含 block 之外？

转载 作者：行者123 更新时间：2023-12-05 03:02:55 26 4
gpt4 key购买 nike

我是HTML/CSS初学者，只是一些关于 float 元素的问题，下面是代码

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left; 
  background: pink;
}

.left_second {
  position:relative;
  background: blue;
}

.right {
  float: right;
  background: cyan;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device_width,initial-scale=1.0">
<title>Page Title</title>	
 <link rel="stylesheet" type="text/css" href="makeup.css">
</head>
<body>


<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <div class="right">3</div>
</section>


</body>
</html>

所以我的问题是:

  1. 据说， float 元素已从页面的正常流中移除，但仍保留为流的一部分(与绝对定位相反)。 但“仍保留一部分流量”究竟是什么意思？正如我们所看到的，第二个 div 与第一个 div 重叠，这意味着第一个 div 不再是流的一部分了吗？唯一能让它“仍然保持流程的一部分”的是在第二个 div 上设置 float:left，然后第二个在第一个 div 的右边，这看起来像first div 确实存在于流程中，我的理解正确吗？

  2. 为什么第三个 div 在包含 block 之外？为什么它不像第一个和第二个 div 那样位于包含 block 内？

最佳答案

它仍然是流程的一部分，因为文本仍然围绕着 float ，因此它们仍然被认为是流程的一部分，不像 position:absolute 元素不会再影响流程。

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).ref

为了回答您的问题，让我们逐步添加属性。

最初我们有这个:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  /*float: left;*/ 
  background: pink;
}

.left_second {
  position:relative;
  background: blue;
}

.right {
  /*float: right;*/
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <div class="right">3</div>
</section>

没有 float 元素，每个 div 占一行，并且所有元素都在该部分的边框内。让我们 float 第一个并使蓝色背景有点透明并删除最后一个 div。

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  background: rgba(0,0,255,0.4);
}

.right {
  /*float: right;*/
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <!--<div class="right">3</div>-->
</section>

如您所见，蓝色 div 完全覆盖了 float 元素，蓝色 div 的文本在外面。在这里，您面临溢出问题。让我们增加蓝色框的宽度以便更好地查看:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  width:300px;
  background: rgba(0,0,255,0.4);
}

.right {
  /*float: right;*/
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2</div>
  <!--<div class="right">3</div>-->
</section>

如您所见，文本 (2) 在 float 元素之后开始并且不与其重叠，因为文本环绕 float 元素与 block 元素不同。换句话说，蓝色 div 将从 float 元素的顶部开始，而不是其内容，如果尺寸减小，文本将被推到下一行并溢出:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  width:300px;
  background: rgba(0,0,255,0.4);
  transition:1s;
}
.left_second:hover {
  width:200px;
}

.right {
  /*float: right;*/
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2 (hover me)</div>
  <!--<div class="right">3</div>-->
</section>

您可能还会注意到，只有 蓝色 div 被该部分的蓝色边框包围，因为它是唯一的非 float 元素，并且由于它与粉红色重叠，所以这个元素也必然存在。如果你移除蓝色的 div，你会看到粉色的在外面:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  width:300px;
  background: rgba(0,0,255,0.4);
  transition:1s;
}
.left_second:hover {
  width:200px;
}

.right {
  /*float: right;*/
  background: cyan;
}
<section>
  <div class="left">1</div>
  <!--<div class="left_second">2</div> -->
  <!--<div class="right">3</div>-->
</section>

现在，如果我们重新添加第三个 div，它将从蓝色 div 的底部和该部分内部开始:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  background: rgba(0,0,255,0.4);
}

.right {
  /*float: right;*/
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2</div> 
  <div class="right">3</div>
</section>

如果你将它 float 到右边，它会被放置在该部分的右边和外面:

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  background: rgba(0,0,255,0.4);
}

.right {
  float: right;
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2</div> 
  <div class="right">3</div>
</section>

这就是为什么我们需要清除 float 以避免重叠效应和外部效应:

section {
  border: 1px solid blue;
  overflow:hidden; /*make the float inside*/
}

div {
  margin: 5px;
  width: 200px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.left_second {
  position:relative;
  clear:left; /*clear left float*/
  background: rgba(0,0,255,0.4);
}

.right {
  float: right;
  background: cyan;
}
<section>
  <div class="left">1</div>
  <div class="left_second">2</div> 
  <div class="right">3</div>
</section>

关于html - float 元素在包含 block 之外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54299260/

26 4 0
文章推荐： java - Spring Data - 通过方法名称获取单列查询
文章推荐： html - 我怎么能做一个斜方肌div
文章推荐： sql - 在 3 个字符后插入空格 (SQL Express)
文章推荐： apache-kafka - 用于 MySQL 的 Debezium 连接器。缺少数据库历史主题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com