如何在HTML中创建浮动版式？

要使用HTML创建浮动布局，请使用CSS Float。网站有多个列来显示内容。CSS Float是多列布局的一种方法。

浮动布局通常用于网站布局。这是使用CSS Float属性完成的。

这是浮动布局，您可以轻松创建-

示例

您可以尝试运行以下代码以在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>Nhooo.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>

基础教程