如何在HTML中创建浮动布局？

布局使网页看起来更好，并排列网页上的视觉元素。它确定了网页的整体外观。

HTML 布局指定网页上不同组件的排列方式。许多 HTML 元素定义了网页的不同部分。

以下是用于 HTML 布局的 HTML 元素：

序号 属性和描述
1

header

它指定网页内容部分的标题。
2

section

它表示网页上的内容部分。
3

nav

它指定网页上导航链接的容器。
4

index

它指定附加信息，并不总是需要添加到网页上。
5

aside

它指定网页内容之外的内容。
6

footer

它指定网页上某一部分的页脚。

以下是用于 HTML 网页布局的 CSS 属性：

  • CSS float 属性

  • CSS flexbox

  • CSS 框架

  • CSS grid

  • HTML表格

我们使用 CSS 属性 float 来在 HTML 中创建浮动布局。float 属性允许我们将元素浮动到网页的左侧或右侧，并允许文本环绕对象（图像或框）。float 用于创建网页布局。

以下是 float 属性的属性：

  • left − 元素浮动到网页内容的左侧。

  • right − 元素浮动到网页内容的右侧。

  • none − 元素不浮动。

语法

<style= “float:right”>

示例 1

下面是一个在网页上浮动元素的示例。

我们可以在网页上浮动图像、文本和其他内容。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h1><span style= "color: red;float:right">Mr. Bean</span></h1>
   <p>
      Mr. Bean is a British sitcom created by Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the title character.
   </p>
   <p>
      <img src="" style="float:left;width:80px;height:80px;">
      Mr. Bean is a British sitcom created by Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the title character.
   </p>
</body>
</html>

下面是网页的示例 HTML 布局。

示例 2

下面是用于 HTML 布局的所有不同元素的示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .head{
         font-size:17px;
         margin-left:10px;
         margin-bottom:15px;
      }
      body {
         margin: 0 auto;
         background-position:center;
         background-size: contain;
      }
      .menu {
         position:static;
         top: 0;
         background-color:skyblue;
         padding:10px 0px 10px 0px;
         color:white;
         margin: 0 auto;
         overflow: hidden;
      }
      .menu a {
         float: left;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 20px;
      }
      .menu-log {
         right: auto;
         float: right;
      }
      footer {
         width: 100%;
         bottom: 0px;
         background-color:slategrey;
         color: #fff;
         position: absolute;
         padding-top:20px;
         padding-bottom:50px;
         text-align:center;
      }
      .body{
         margin-left:10px;
      }
      .aside{
         right:inherit;
         float: right;
         width: 20%;
   }
</style>
</head>
<body>
   <header>
      <div class="head"><h1><span style="color: red">NPTEL</span></h1> Online Learning Initiatives by IITs and IISc funded by MoE, Govt. of India</div>
   </header>
   <div class="menu">
      <a href="#home">HOME</a>
      <a href="#course">COURSE</a>
      <a href="#help">HELP</a>
      <a href="#about">ABOUT</a>
      <a href="#settings">SETTINGS</a>
   <div class="menu-log">
      <a href="#login">LOGIN</a>
   </div>
   </div>
   <div class = "body">
      <section id="Content">
         <h3>1.6 crore+ enrollments<br>
         15 lakhs+ exam registrations<br>
         4500+ LC colleges<br>
         3500+ MOOCs completed<br>
         60+ Industry associates</h3>
      </section>
   </div>
   <div class="aside"><aside>1.3 Billion+ views<br>
      37 lakhs+ YouTube subscribers<br>
      2300+ unique courses available for self study</aside>
   </div>
   <footer style="font-size: 20px">Documents
      Careers
      Help Videos
      Live Sessions
      Information on NPTEL semesters
   </footer>
</body>
</html>

以下是上述示例程序的输出。

示例 3

您可以尝试运行以下代码，在 HTML 中创建上述浮动布局。

<!DOCTYPE html>
<html>
<head>
   <style>
      div.mycontent {
         width: 100%;
         border: 1px solid green;
      }
      header, footer {
         padding: 1em;
         color: green;
         background-color: #FAFAFA;
         text-align: left;
      }
      nav {
         float: left;
         max-width: 150px;
         padding: 1em;
      }
      nav ul {
         list-style-type: none;
         padding: 0;
      }
      article {
         margin-left: 10px;
         border-left: 1px solid gray;
         padding: 1em;
         overflow: hidden;
      }
   </style>
</head>
<body>
   <div class="mycontent">
      <header>
         <h1>Tutorialspoint.com</h1>
         <h3>Simply Easy Learning</h3>
      </header>
      <nav>
         <ul>
            <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
            <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
            <li><a href="/codingground.htm">Coding Ground</a></li>
            <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
            <li><a href="/online_dev_tools.htm">Tools</a></li>
         </ul>
      </nav>
      <article>
         <h1>About Us</h1>
         <p>This is demo content.</p>
         <p>This is demo content.</p>
         <p>This is demo content.</p>
         <p>This is demo content.</p>
      </article>
      <footer>Add the footer content here</footer>
   </div>
</body>
</html>

更新于：2022年10月19日

3K+ 浏览量

启动你的职业生涯

通过完成课程获得认证

开始学习
广告