Right floated container results in line break

问题

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:

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).
the header div is floating "over" the green bordered div.
since the purple elements are left floated with another div, this div would float beside the floated header.

what am i missing?

回答1:

Here is the solution with display: inline-block

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; display: inline-block;">HEADER</div>
  <div style="border: 1px solid green; display: inline-block;">
    <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>

回答2:

You are floating the "HEADER" div and the "green" div inside the container. The contents of the green div are collectively too wide to fit to the right of the header. If you remove float: left from the div between the green div and the .element divs, you will see the result you are after.

<div class="container" style="float: right">
    <div style="float: left">HEADER</div>
    <div style="border: 1px solid green;">
        <div>
            <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>

回答3:

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>

来源：https://stackoverflow.com/questions/29898939/right-floated-container-results-in-line-break

标签

html

css

css-float