多列网页布局CSS float 属性和 CSS Clear 属性

本文链接：https://blog.csdn.net/allway2/article/details/125659503

CSS float 属性

CSS float 属性用于设计多列网页布局。如果你想设计两列或三列的网页布局，你必须在float 属性的帮助下浮动你的 div 元素。

div 标签是块级元素，因此，div 元素获取完整的水平空间，下一个 div 元素从新行开始。如果您希望多个 div 并排排列并制作一个优雅的设计网页。

示例 1 – 具有 Float 属性的两列布局

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container
            {

            }
            .left-sidebar
            {
                float:left;
                width:30%;
                height:200px;
                background-color:red;
            }
            .main
            {
                float:left;
                width:70%;
                height:200px;
                background-color:blue;
            }
            .cleaner
            {
                clear:both;
            }
            .footer
            {
                height:80px;
                background-color:orange;
                padding:1px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left-sidebar">
            </div>

            <div class="main">
            </div>

            <div class="cleaner">
            </div>

            <div class="footer">
            </div>
        </div>

    </body>
</html>

在上面的代码中，我们应用了 2 个 div，它们的名称分别是 left-sidebar 和 main。对这些 <div> 标签应用一些 CSS 属性。

图 1 – float 属性在创建多列布局中的应用

注意：在这个设计中，所有的 div 元素都是水平浮动的。你必须清除浮动。如果您不清除浮动，则下一个 div 元素将不会浮动到前一个 div 元素并且不会显示。

CSS Clear 属性清除左右浮动

如果您想要比使用填充和边距更多地增强设计的外观。使盒子模型看起来并与父模型有一些空间。

示例 2 – 使用 Float 属性创建具有适当填充的美观的两列布局。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container
            {

            }
            .main
            {
                float:left;
                width:75%;
                height:200px;
                background-color:yellow;
            }
            .main-inner
            {
                background-color:white;
                height:170px;
                margin:10px;
            }
            .right-sidebar
            {
                float:right;
                width:25%;
                height:200px;
                background-color:darkcyan;
            }
            .right-sidebar-inner
            {
                background-color:white;
                height:170px;
                margin:10px;
            }
            .cleaner
            {
                clear:both;
            }
            .footer
            {
                height:80px;
                background-color:red;
                padding:1px;
            }
            .footer-inner
            {
                background-color:white;
                height:50px;
                margin:9px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="main">
                <div class="main-inner">
                </div>
            </div>

            <div class="right-sidebar">
                <div class="right-sidebar-inner">
                </div>
            </div>

            <div class="cleaner">
            </div>

            <div class="footer">
                <div class="footer-inner">
                </div>
            </div>
        </div>

    </body>
</html>

在上面的代码中，我们应用了 2 个 div，它们的名称分别是 right-sidebar 和 main。对这些 <div> 标签应用一些 CSS 属性。

图 2 - 应用程序浮动属性与适当的填充具有良好的外观。

注意：在这个设计中，所有的 div 元素都是空白的，这就是我们使用 height 属性来使这个 div 可见的原因。在将内容插入 div 之后，您可以从 CSS 中删除 height 属性。

三栏式布局设计中具有清除属性的浮动属性

您还可以使用给定的代码进行三列设计。

示例 3 - 具有三列布局的浮点属性示例

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container
            {

            }
            .left-sidebar
            {
                float:left;
                width:20%;
                height:200px;
                background-color:orange;
            }
            .left-sidebar-inner
            {
                background-color:white;
                height:170px;
                margin:10px;
            }
            .main
            {
                float:left;
                width:60%;
                height:200px;
                background-color:blue;
            }
            .main-inner
            {
                background-color:white;
                height:170px;
                margin:10px;
            }
            .right-sidebar
            {
                float:left;
                width:20%;
                height:200px;
                background-color:green;
            }
            .right-sidebar-inner
            {
                background-color:white;
                height:170px;
                margin:10px;
            }
            .cleaner
            {
                clear:both;
            }
            .footer
            {
                height:80px;
                background-color:yellow;
                padding:1px;
            }
            .footer-inner
            {
                background-color:white;
                height:50px;
                margin:9px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left-sidebar">
                <div class="left-sidebar-inner">
                </div>
            </div>

            <div class="main">
                <div class="main-inner">
                </div>
            </div>

            <div class="right-sidebar">
                <div class="right-sidebar-inner">
                </div>
            </div>

            <div class="cleaner">
            </div>

            <div class="footer">
                <div class="footer-inner">
                </div>
            </div>
        </div>

    </body>
</html>

在上面的代码中，我们应用了 3 个 div，它们的名称分别是 left-sidebar、right-sidebar 和 main。对这些 <div> 标签应用一些 CSS 属性。增强网页的外观和感觉。