.float-right doesn't work inside a .row

The button in the HTML below (codepen.io) remains left-aligned despite the float-right class.

<!DOCTYPE html>
<html>
<head>
  <title>.float-right issue</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>.row { background-color: #ff8621; }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <button class="btn btn-primary float-right">To the right!</button>
    </div>
  </div>
</body>
</html>

Firefox 58.0.2, linux/amd64

[Kout]

I am afraid, it cannot work, as floats in flexbox context don’t work by principle. But you can achieve floating behaviour by adding margin: auto in desired direction. So in your case (to let the element float right) add margin-left: auto to it. Adding .ml-auto on the button, should get you there.

See example here: https://stackoverflow.com/a/36606694/2296044

@Kout In this case I think it should be documented somewhere or other.

Also, the float-right class doesn't have to use the float CSS property internally.

[Kout]

@opennota You mean something like:

.float-right {
    float: right !important;

    . row > & {
        margin-left: auto !important;
    }
}

?

Well, it deserves more discussion and thinking. Personally I am not up for it. It is kinda workaround/hack which can cause more harm than good in the end. Simply: don’t expect floats to work inside flexbox.

[kevinruscoe]

The problem is floating doesn't work like flex-boxes auto margins. Take https://codepen.io/anon/pen/aYOrMO for example, the DOM order is 1, 2. But if you float of these right then the order becomes 2, 1. Whereas if you auto-margined to push them to the right, they'll retain their DOM position. So, I think it's a bad idea to assume .float-right on flex works the same way as `.float-right' on non-flex items.

[danijelGombac]

You can use order classes (.order-) with auto-margin.

[Kout]

@kevdotbadger These are exactly my worries of mixing two principles: flexbox and floats. I think nowdays with even better support of CSS grid, float should be really used mostly for its original purpose: floatning blocks inside text. For layout it’s been a hack (very clever though).

@opennota Looking again at your code: why do you use .row actually? If there is just button it should be direct child of the .container. In terms of how the BS grid system works, there should be “only” .col-s as direct descendants of the .row element. Think of it as ul (~ .row) and li (~ .col).

@Kout
My concern is that the documentation on floats doesn't say anything about it not working well with the new flex/grid system.

[kevinruscoe]

@opennota Is that the documentations' problem though? Flex and float generally don't work well together anyway. There's a couple of assumptions here:

1 - The developer knows enough about CSS to know the quirks
2 - The developer doesn't know enough about CSS to use flex and float together.

I don't think we need to hand-hold the developer and tell them what doesn't work well together.

[mdo]

Not the documentation's fault IMO, but I'm always open to changes to help clarify. Few things, though:

• In our grid docs, we explicitly state only columns can be immediate children of rows. Your opening example has a row for no reason and a button within. Ditch the row, and you can float.
• Float utilities are for the float property. Internally, they must use that CSS and nothing else.
• Utilities are immutable, they cannot change based on their parent's context.
• Lastly, float and flex are two different layout approaches. They don't mix, and they require some background knowledge for the history there.

So, all told, only thing we could do is on the float utilities page is to mention floats don't mix with miscellaneous layout modules (flex, likely grid, probably table, etc).

@mdo

So, all told, only thing we could do is on the float utilities page is to mention floats don't mix with miscellaneous layout modules (flex, likely grid, probably table, etc).

SGTM.