右浮动容器会导致换行 [英] Right floated container results in line break

问题描述

我目前正在与浮动元素打架。

请查看此jsfiddle： float-issue

* / border：1px solid black;}。element {margin-left：10px; margin-right：10px;背景颜色：紫色; float：left;}

 < div class = style =float：right> < div style =float：left> HEADER< / div> < div style =border：1px solid green;> < div style =float：left> < div class =element> lorem ipsum dolor sit amet。< / div> < div class =element> lorem ipsum dolor sit amet。 < / div> < div class =element> lorem ipsum dolor sit amet。< / div> < / div> < / div>< / div>  

不明白为什么紫色元素不在HEADER旁边，而是在一个新行上？当在已经浮动的div周围添加绿色边框div元素时，会出现此问题。我不能解释为什么这会导致新的行？

1. 绿色边框div不是浮动的，所以它填充容器div（因为没有内容（内部的元素是浮动的，因此不是流的一部分）收缩到零高度）。




3. 由于紫色元素与另一个div悬浮，此div将浮在浮动的标题旁边。

我失踪了什么？

解决方案

您的浮动的位置。首先浮动标题左边，然后立即浮动包含.element类div的div。但不要浮动.element div。 fiddle here： https://jsfiddle.net/e9bqoucg/2/

 < div class =containerstyle =float：right> 
 
< div style =border：1px solid green;> 
< div style =float：left;> HEADER< / div> 
< div style =float：left> 
 
< div class =element> lorem ipsum dolor sit amet。 < / div> 
< div class =element> lorem ipsum dolor sit amet。 < / div> 
< div class =element> lorem ipsum dolor sit amet。 < / div> 
< / div> 
< / div> 
< / div> 
  

i am currently fighting with floated elements again.

please take a look at this jsfiddle: float-issue

html {
  width: 100%
}
.container {
  /*width: 80%;*/
  /*margin: auto;*/
  border: 1px solid black;
}
.element {
  margin-left: 10px;
  margin-right: 10px;
  background-color: purple;
  float: left;
}

<div class="container" style="float: right">
  <div style="float: left">HEADER</div>
  <div style="border: 1px solid green;">
    <div style="float: left">
      <div class="element">lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet.</div>
    </div>
  </div>
</div>

what i don´t understand is, why are the purple elements not next to the "HEADER" but on a new row? this issue came when adding the green bordered div element around the already floated div. i cant explain why this results in the new row? can anyony help me out?

what i thought would happen was:

1. the green bordered div is not floated so it fills the container div (and because is has no content (the elements inside are floated and therefore not part of the flow) shrinks to zero height).
2. the header div is floating "over" the green bordered div.
3. since the purple elements are left floated with another div, this div would float beside the floated header.

what am i missing?

解决方案

It's about the placement of your floats. Float the header left first, then immediately after float the div containing the ".element" class divs. But DON'T float the .element divs. fiddle here: https://jsfiddle.net/e9bqoucg/2/

 <div class="container" style="float: right">

    <div style="border: 1px solid green;">
        <div style="float: left;">HEADER</div>
        <div style="float: left">

            <div class="element">lorem ipsum dolor sit amet.  </div>
            <div class="element">lorem ipsum dolor sit amet.  lorem ipsum dolor sit amet.</div>
            <div class="element">lorem ipsum dolor sit amet.  </div>
        </div>
    </div>
</div>

这篇关于右浮动容器会导致换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！