CSS中float属性是否已被弃用？对应的替代方案有哪些？

float属性是否被弃用？ #

float属性没有被官方弃用，它的设计初衷是实现文字环绕图片这类排版效果，至今仍属于W3C CSS规范中的合法可用属性。只是早年前端没有专业布局方案时，开发者常把float强行用来实现全局页面布局，现在有了更适配布局场景的技术后，已经不推荐用float做布局功能，但属性本身没有被废弃，在文字环绕等原生适配场景下依然可以正常使用。

布局场景下的替代方案 #

目前主流的布局替代方案有两类，适配不同需求：

• Flex布局：适合一维（单一行/列）的布局场景，写法简单、兼容性好，全球98%以上的浏览器都支持
• Grid布局：适合二维（同时控制行+列）的复杂网格布局场景，灵活性更强

针对你给出代码的改造示例 #

你的需求是让.security-wrapper右对齐、占50%宽度，用Flex改造无需修改HTML结构，仅调整CSS即可，修改后的代码如下：

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;
  /* 新增Flex布局配置 */
  display: flex;
  justify-content: flex-end;
}

#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>

如果你不想修改父容器#security的样式，也可以直接给.security-wrapper添加margin-left: auto、删除float: right即可实现完全相同的效果。

内容的提问来源于stack exchange，提问作者user17074809