Can I combine position: relative and float: left?

Can I apply both position: relativ开发者_运维百科e and float: left on one element? Like this:

div {
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
}

Yes.

CSS2.1, 9.4.3:

"Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning"

The answers that claim that you can combine float and position are actually incorrect. Yes, the position of the floating div will indeed move, but the surrounding text will not flow as you expect. The problem is that the position attributes effectively leave a white box where the div that you're floating used to be, then moves the div elsewhere, leaving the box behind. Put another way, you'll be positioning your div on top of the text, when what you probably want is for the text to flow around the div in its new position.

Here's an example of a div that has a simple float:right

Here's an example of the same div, but with position:relative; and top:.75in; added:

Note how the box is now sitting on top of the text. That's probably not what you want!

Could I apply position relative and float left on one element?

Yes. Try it out.

I want to provide a different answer in case it may help someone. I had two side by side div's that I wanted them to take up space:

<div class="col-md-12">
    <div class="col-md-6">stuff</div>
    <div class="col-md-6">other stuff</div>
</div>

I used to do this by applying <div class="clear"></div> after all my floating ones. This used to work because .clear { clear: both; } would solve the problem. This no longer works for me. Instead, I followed these instructions and added this class to my container:

.noFloat {
    width: 100%;
    overflow: auto; //If you get a scroll bar, try overflow: hidden;
    float: none;
}

so I ended up with:

<div class="col-md-12 noFloat">...</div>

Here is a link to a bootply.com example: http://www.bootply.com/EupCHRhV4s

yes, with shape-outside + height 100% + pseudo-element

/* container */
.two-box { display: flex; }
.two-box > div { border: solid 1px blue; }

/* border */
.two-box > div > .label::before {
 content: "";
 position: absolute;
 width: 3em;
 height: 3em;
 border: solid 1px red;
}

/* float shape + text */
.two-box > div > .label {
 position: relative;
 height: 100%;
 width: 3em;
 shape-outside:
  polygon(
    0 33%,
    100% 33%,
    100% 66%,
    0 66%
  )
 ;
 border: dotted 1px yellow;
 color: red;
 text-align: center;
 /* vertical center text */
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.two-box > .left > .label { float: right; }

.two-box > .right > .label { float: left; }

<div class="two-box">
 <div class="left">
  <div class="label">L</div>
  L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L
 </div>
 <div class="right">
  <div class="label">R</div>
  R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R
 </div>
</div>

Yes, You can use both.

You will use float:left to position element to left side and permit next element to position right side of this.

position:relative will affect itself and it's children, to take own position. when you will use left:npx;top:npx it will move this element left,right,top and bottom.

You can check this demo: jsfiddle link