完成flex布局与float布局

当涉及到布局时，Flex布局和Float布局是两种不同的方法，它们分别用于实现不同的布局需求。下面我将为你展示如何使用这两种方法来完成布局。

1. 使用Flex布局：

Flex布局是一种强大的布局方法，特别适用于创建响应式和灵活的布局。以下是一个简单的例子，演示如何使用Flex布局来创建一个水平居中的页面内容：


<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 让容器占据整个视口高度 */
    }
  </style>
</head>
<body>
  <div class="container">
    <p>This is centered using Flexbox.</p>
  </div>
</body>
</html>

2. 使用Float布局：

Float布局在过去常用于创建复杂的多栏布局，但它不如Flex布局强大和灵活。以下是一个使用Float布局创建两栏布局的示例：


<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 100%;
    }
 
    .column {
      float: left;
      width: 50%;
    }
 
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <p>This is column 1.</p>
    </div>
    <div class="column">
      <p>This is column 2.</p>
    </div>
    <div class="clear"></div>
  </div>
</body>
</html>

我们创建了两个具有50%宽度的列，通过使用float: left;来实现。最后，我们添加了一个清除元素来确保容器的高度适应内容。

Flex布局通常比Float布局更适合现代网页布局，因为它提供了更多的控制和更好的响应性支持。但在某些情况下，Float布局仍然可能有用，尤其是在需要支持古老浏览器的情况下。推荐在新项目中使用Flex布局或CSS Grid布局来实现更灵活和现代的布局。

相关阅读:
ROS2下使用TurtleBot3--＞SLAM导航（仿真）RVIZ加载不出机器人模型
C++ break 语句
玩转Linux与运维岗（44）
web前端期末大作业在线电影网页设计与制作 HTML+CSS+JavaScript仿叮当电影网页制作
前端实习最终章
基于SqlSugar的数据库访问处理的封装，在.net6框架的Web API上开发应用
VUE | “面包屑”的原理
Spring和SpringBoot学习
2023-10-19 指针与指针的指针，我就不信你脑壳不疼
codesys TCP客户端程序

原文地址：https://blog.csdn.net/weixin_62304542/article/details/133185689