CSS浮动布局案例

时间 2020-01-18

标签 css 浮动布局案例栏目 CSS 繁體版

原文原文链接

CSS浮动布局案例

这里介绍下float布局的几种常见布局方式，若是对基础知识有疑问能够去看一下上一篇文章CSS浮动基础知识css

流体布局

顾名思义流体布局就是布局格式能够随着窗口大小的变化而变化，具体实现以下html

代码演示(后续CSS代码均在此代码基础上进行修改)ide

<body>
    <div class="container clearfix">
        <main class="main">
            <div class="content"></div>
        </main>
        <aside class="aside" ></aside>
    </div>
    <p>testtesttest</p>
</body>
</html>

CSS代码布局

<style type="text/css">
        .main{
            width:100%;
            float:left;
        }
        .content{
            height:300px;
            margin:0 200px;
            background:yellow;
        }
        .aside{
            width:180px;
            height:300px;
            background:red;
            float:left;
            margin-left:-100%;
            /*流体布局的重点是边栏的左边距-100%，经过负值能够将元素强行拉到上一行*/
        }
    </style>

处理结果以下
code

1. css浮动案例
2. CSS浮动案例
3. css 浮动布局，清除浮动
4. CSS布局 0x3 浮动布局
5. CSS——浮动布局与定位布局
6. CSS浮动布局-float
7. CSS浮动布局详解
8. CSS布局及浮动
9. CSS之浮动布局（float，浮动原理，清除/闭合浮动方法） css之浮动布局
10. 【CSS】深入理解CSS浮动布局
更多相关文章...
• ionic 浮动框 - ionic 教程
• W3C CSS 活动 - W3C 教程
• 常用的分布式事务解决方案
• JDK13 GA发布：5大特性解读