float does not work in a flex container

by

The float property is ignored in a flex container.

From the flexbox specification:

3. Flex Containers: the flex and inline-flex display
values

A flex container establishes a new flex formatting context for its
contents. This is the same as establishing a block formatting context,
except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the
flex container’s margins do not collapse with the margins of its
contents.

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Instead, just use flex properties:

footer {
    display: flex;
    justify-content: flex-end;
}
<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

If you have more items in the footer, and need other alignment options, then here are two guides:

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. How to place elements like this
  3. Flexbox code working on all browsers except Safari. Why?
  4. How to center a flex container but left-align flex items
  5. Left column and stacked right column using flexbox CSS [duplicate]
  6. flex property not working in IE
  7. Last margin / padding collapsing in flexbox / grid layout
  8. Equal width flex items even after they wrap
  9. How to center elements on the last row in CSS Grid?
  10. input / button elements not shrinking in a flex container
  11. How can I combine flexbox and vertical scroll in a full-height app?
  12. Why isn’t object-fit working in flexbox?
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. Removing margin from flex items when they wrap
  15. ‘position: sticky’ not working when ‘height’ is defined
  16. Calculator keypad layout with flexbox
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Flex item should align left, not center, when it wraps
  19. Flexbox affects overflow-wrap behavior
  20. How to align flexbox columns left and right?
  21. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  22. Prevent a child element from overflowing its parent in flexbox [duplicate]
  23. Why isn’t position:sticky with left:0 working inside a scrollable container?
  24. Chrome does not expand flex parent according to children’s content [duplicate]
  25. Flexbox with fixed header and footer and scrollable content
  26. What are the default values for justify-content & align content?
  27. display: flex not working on Internet Explorer [duplicate]
  28. Image behavior within flexbox (rows embedded in columns)
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment