浮动元素是否在包含块之外? [英] floating elements are outside of containing blocks?

查看：82
本文介绍了浮动元素是否在包含块之外?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm a beginner in HTML/CSS, just some questions on floating elements, below is the code

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. 据说 浮动元素已从页面的常规流程中删除，尽管仍然保留了一部分流程(与绝对定位相反). 但是仍然保留一部分流量"实际上是什么意思?如我们所见，第二个div与第一个div重叠，这意味着第一个div不再是流的一部分了吗?唯一可以使它仍然保留流的一部分"的是在第二个div上设置float:left，然后第二个在第一个div的右侧，这似乎第一个div确实存在于流中，我的理解正确吗?

  1. It is said that floating element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning). But what does "still remaining a part of the flow" actually mean? As we can see that second div overlaps the first div, which means that the first div is not part of flow anymore? the only thing can make it "still remaining a part of the flow" is to set the float:left on the second div, then the second is on the right of the first div, which seems like the first div does exist in the flow, is my understanding correct?

为什么div div在包含块之外?为什么它不像第一和第二个divs那样包含在包含块中?

Why the thrid div is outside of the containing block? why it is not inside the containing block just like first and second divs?

推荐答案

它仍然是流的一部分，因为文本仍然围绕float浮动，因此与position:absolute元素不同，它们仍被视为流的一部分，不会再影响流.

It remains a part of the flow because text still wrap around float thus they are still considered a part of the flow unlike position:absolute elements that will no more affect the flow.

float CSS属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕在容器中.尽管仍保留了一部分内容(与绝对定位相反)，但该元素已从页面的常规流程中移除.

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

要回答您的问题，让我们逐步添加属性.

To answer your question, let's add the properties step by step.

最初我们有这个:

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占据一行，所有div都位于该节的边界内.让我们浮动第一个，使蓝色背景稍微透明，然后移除最后一个div.

No float element, each div taking a row and all of them inside the border of the section. Let's float the first one and make the blue background a bit transparent and remove the last 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的文本在外部.在这里，您面临oveflow问题.让我们增加蓝色框的宽度可以更好地看到:

As you can see the blue div is completely overlapping the float element and the text of the blue div is outside. Here you facing an oveflow issue. Let's increase the width of the blue box to better see:

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元素不同，它围绕float元素.换句话说，蓝色div将从float元素的顶部开始，而不是其内容的顶部，并且如果减小大小，则文本将被推送到下一行并溢出:

As you can see, the text (2) start after the float element and don't overlap it because text wrap around float element unlike block element. In other words, the blue div will start on the top of the float element but not its content and if the size is reduced the text will get pushed to the next line and will overflow:

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，因为它是唯一的非浮动元素，并且由于它与粉红色重叠，所以该元素也必将出现在该区域中.如果删除蓝色div，则会看到粉红色的div在外面:

You may also notice that only the blue div is surrounded by the blue border of the section because its the only non floated element and since it overlap the pink this one will necessarly be there too. If you remove the blue div you see that the pink one is outside:

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的底部开始并位于该部分内:

Now if we re-add the third div it will start at the bottom of the blue div and inside the section:

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>

如果将其浮动到右侧，它将放置在该部分的右侧和外部:

And if you float it to the right, it will be place on the right and outside the section:

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>

这就是为什么我们需要清除浮点数以避免重叠效应和 outside 效应:

That's why we need to clear float to avoid the overlap effect and the outside effect:

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>

这篇关于浮动元素是否在包含块之外?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆