浮动元素行为 [英] floating elements behavior

问题描述

我只在div中遇到浮动元素问题，这是问题所在:

I'm facing problem with floating elements inside div only , here is the problem:

.main{	
    border-style:solid;
    border-color:yellow;
    overflow:auto;	
}

.first {
    width:200px;
    height:100px;
    float: left;
    border: 10px solid green;
}
.second {
width:200px;
    height: 50px;
    border: 10px solid blue;
}

<div class="main">
<div class="first">test1</div>
<div class="second" >test2</div>
</div>

我需要说明第二个DIV的边框及其内容位置.为什么边框在后面但内容在第一格之下?

I need an explanation about the border of second DIV and its content position. Why the border is behind but the content is under the first div?

还根据: https://css- ricks.com/all-about-floats/#article-header-id-3

使用浮点数更令人困惑的事情之一是它们如何影响包含它们的元素(它们的父"元素).如果此父元素仅包含浮点元素，则其高度实际上将崩溃为零.如果父母不包含任何视觉上可察觉的背景，这并不总是很明显，但是要意识到这一点很重要.

One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.

我需要弄清为什么会这样.

I need clarification why this happening.

我要解释这两个问题的行为，而不是如何解决.

I'm asking for explanation for it's behavior for both questions , NOT how to solve it .

推荐答案

这是应该如何绘制元素的逻辑行为，但是您遇到了溢出问题以及float的工作方式使事情变得 strange .

This is the logical behavior of how the elements should be painted but you are having an overflow issue combined with how float works that is making things strange.

让我们删除一些属性，并逐步遵循代码.首先从main中删除overflow:auto，从.second

Let's remove some properties and follow the code step by step. Let's start by removing overflow:auto from main and the fixed height from .second

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  /*height: 50px;*/
  border: 10px solid blue;
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

如您所见，浮动元素绿色在蓝色 div上方，并且仅在其内容(即文本)周围浮动.就像您可以在此处阅读:

As you can see, the floating element green is above the the blue div and floating only around its content which is text. Like you can read here:

float CSS属性指定应放置一个元素 沿其容器的左侧或右侧，允许文本和 内联元素以环绕它.该元素已从 网页的正常流量，但仍然是该流量的一部分 (与绝对定位相反).

The float CSS property specifies that an element should be placed along 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 web page, though still remaining a part of the flow (in contrast to absolute positioning).

并且由于两个div的宽度均相同，因此文本将位于底部而不是右侧.您可以更改蓝色 div的width来查看不同之处:

And since both div have the same width the text will be at the bottom and not the right. You can change the width of the blue div to see the difference:

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  /*height: 50px;*/
  border: 10px solid blue;
  animation:change 1s infinite alternate linear;
}

@keyframes change{
 from{width:200px}
 to{width:400px}
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

现在，如果您查看绘画顺序，您会发现我们首先在步骤(4)中打印块非浮动元素的边框/背景，然后在步骤(5)中打印浮动元素，然后在步骤(7)中打印非浮动元素的内容，这说明了为什么请参见绿色

Now if you check the painting order you will see that we first print the border/background of block non-floating element in the step (4) then we print the floating element in the step (5) then we print the content of the non-floating element in the step (7) which explain why you see the blue under the green

现在，如果我们将固定高度添加到 blue 元素中，您将面临 overflow 问题，因此蓝色的内容将保留在外部(如前面的代码中一样)但是定义元素限制的边框将位于 green 元素的后面(如绘画顺序中所述)

Now if we add a fixed height to the blue element you will face an overflow issue so the content of the blue will stay outside (like in the previous code) BUT the border that define the limit of the element will be behind the green element (like described in the paiting order)

以下是带有动画的代码，可以更好地了解正在发生的事情:

Here is a code with animation to better understand what is happening:

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  border: 10px solid blue;
  animation:change 2s infinite alternate linear;
}

@keyframes change {
  from{height:300px;}
  to{height:50px;}
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

您还可以清楚地看到main 黄色元素的高度跟随蓝色元素的高度，因为它是唯一一个流入的元素，可以解释您的第二个问题，即未考虑浮点的问题通过添加overflow:auto在其父元素BUT的高度中，您将创建一个块格式设置上下文，因此该元素的行为将有所不同，并将考虑内部浮动元素的高度:

You can also clearly see that the height of main yellow element is following the height of the blue one because it's the only in-flow element which explain your second question about float not being considered in the height of their parent element BUT by adding overflow:auto you will create a block formatting context thus the element will behave differently and will consider the height of floating elements inside:

.main {
  border-style: solid;
  border-color: yellow;
  overflow: auto;
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  border: 10px solid blue;
  animation:change 2s infinite alternate linear;
}

@keyframes change {
  from{height:300px;}
  to{height:50px;}
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

最后，您可以清楚地看到溢出问题，由于oveflow:auto添加了滚动条，文本出现在 blue div之外.

In this last you can clearly see the overflow issue that is making the text to be outside the blue div because oveflow:auto is adding a scroll bar.

这篇关于浮动元素行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！