Is the float property deprecated in CSS?

Question

Is it true that the float property is deprecated?

If so, what alternative should I use instead?

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

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;
}

#security .security-wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  float: right;
  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>

Welcome to Stack Overflow! `float` isn't deprecated, there are better layout properties to work with now - `flex` and `grid`. If your code works, you're fine. — disinfor, Oct 15 '21 at 21:22
According to [Can I Use](https://caniuse.com/?search=float), float isn't deprecated. Your code should function on about 97.14% of all browsers. — unrealapex, Oct 15 '21 at 21:23
I’m voting to close this question because the initial assumption of the question is false - since float is not deprecated and the code works. — disinfor, Oct 15 '21 at 21:25
float is still very useful for floating images or other elements where you want the neghboring text to flow under the floated element if it is too long to just be at the side. — A Haworth, Oct 15 '21 at 21:30
Going forward on your coding journey, I would look at `flex` and `grid` instead of using floats (you can avoid a ton of headaches) for layouts. A Haworth is right about using `float` for elements that may have text wrap around them. — disinfor, Oct 15 '21 at 21:30

Ayat El Sherif · Accepted Answer · 2021-12-01T17:11:06.867

1

I ran your code and it works well as far as I think.

and no, the float property is not deprecated yet in CSS, you can still use it. but for an advanced and more clean easy code, you better use flexbox

your code can be then something like that:

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>

You can learn more about flexbox here:

w3schools

css-tricks

edited Dec 01 '21 at 17:11

answered Oct 15 '21 at 21:37

Ayat El Sherif

119
1
4

This question does not need an answer as the initial premise of the question is incorrect. There was already an answer that was the same as yours and deleted for this reason. Also, the HTML in your snippet has an error, since you're missing the closing `
`
– disinfor Oct 15 '21 at 21:39
@disinfor A mistaken premise does not an off-topic question make. – TylerH Dec 01 '21 at 17:19
@TylerH I'm voting to change your name to TylerHYoda :) I don't think the question was necessarily off-topic - at the time of this question, there was an answer that was essentially the same as this. That said, I wish there as an answer somewhere on Stack Overflow that was the definitive "Stop using floats for layouts" that we could mark as a duplicate every time a float layout question comes up. – disinfor Dec 01 '21 at 17:28
1

@disinfor Well there is this one https://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place which might work as a dupe. I'll read the Q above again and see if it would fit. EDIT: Yep, looks like a good fit to me – TylerH Dec 01 '21 at 18:48
@TylerH nice find! I'm going to save that to my snippets. – disinfor Dec 01 '21 at 20:35

Is the float property deprecated in CSS?

1 Answers1