Is Float For Layout Bad? What Should Be Used in Its Place

body {
  margin: 0;
  padding: 0;
}

#security {
  position: relative;
  background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 500px;
  display: flex; /* displaying it as a flexbox */
  justify-content: end; /* shifting its content to the end "right" */
}

#security .security-wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  width: 50%;
}

#security .security-title {
  text-transform: uppercase;
  font-size: 32px;
  color: #c22312;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 25px;
}

<div id="security">
  <div class="security-wrapper">
    <div class="security-title">Security investment solutions</div>
  </div>
</div>

Is it a good practice to use float to position element?

Fundamentally? Sure, that's what it's there for.

Whether it's the right choice depends on what exactly you want to do.

You just need to take care of the consequences - for example, the need for using the clear property when using multiple subsequent floated elements to avoid undesired effects.

Disadvantage to floating everything in a layout?

@kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.

Every browser renders float correctly.
yes if you use clear:both in your markup like this

<div style="clear:both"></div>

it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.

Why Float is better than position:relative and absolute while we can make layout quickly with position?

float will not break the document flow -- also, it will position any element it uses the best it can fit in the container width -- say I have 5 x 200px divs in a 800px width container, the last 5th will go in a "new line" below the other ones -- using position:relative will make you need to calculate when it needs to break yourself, and it won't break correctly since the display will either be block and go over the whole width or it will be inline-block or inline which won't render the same way for divs as block would and would pretty much mess up the document flow & layout.

It depends on what you want to do: position:relative is used to move the element a bit aside from it's natural location, whereas float will make it pop to the left-most or right-most position in the parent element. position:absolute will let you position it relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

CSS Float Positioning

It's possible if you also float the paragraph in the opposite direction. However, you'll probably end up with a lot of gotchas with floats (e.g. "clearfix").

Look into inline-block or flex layouts for better approaches (or even a grid layout, but browser support is likely still spotty).

Avoid tables for laying out content, they also can come with a lot of unintended, hard-to-debug side-effects.

.text {  float: left;}
iframe {  float: right;}

<div class="text"><p>This is a sentence.</p></div><iframe src="https://www.youtube.com/embed/YbJOTdZBX1g"></iframe>

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}