CSS布局 - 1 浮动布局

两列浮动的布局

应用场景：次要内容区域位于页面左边，主要内容位于页面右边。但是在源代码中为了提高易用性和可访问性，将主要内容放在了次要内容的前面

<div class = "content">
        <div class = "primary">
            main content goes here
        </div>
        <div class="secondary">
            navigation and secondary content goes here
        </div>
    </div>

.content .primary{
        width: 650px;
        padding-right: 20px;
        float: right;
        display: inline;
        background: rosybrown;
    }
    .content .secondary{
        width: 230px;
        float: left;
        display: inline;
        background: saddlebrown;
    }

效果图：

image.png

同时因为这两个子元素是浮动的，不在文档流中占据任何空间，这会导致页脚上升。为了避免这种情况，需要在它们的父元素上应用溢出方法，从而清理浮动元素。

 .content{
        overflow: hidden;
    }

三列的浮动布局

<div class="content">
        <div class="primary">
            <div class="primary">
                your primary primary content goes here
            </div>
            <div class="secondary">
                your secondary primary content goes here
            </div>
        </div>
        <div class="secondary">
            navigation and secondary content goes here
        </div>
    </div>

在一部分分为两部分的基础上，再将其中一部分分为两部分。

    .content .primary{
        width: 670px;
        float: right;
        display: inline;
        height: 300px;
    }
    .content .secondary{
        width: 230px;
        float: left;
        display: inline;
        background: lightgreen;
        height: 300px;
    }
    .content .primary .primary{
        width: 400px;
        float: left;
        display: inline;
        background: rosybrown;
        height: 300px;
    }

    .content .primary .secondary {
        width: 230px;
        float: right;
        display: inline;
        background: saddlebrown;
        height: 300px;
    }

    .content {
        overflow: hidden;
        background: lightsalmon;
    }

image.png