CSS浮动布局案例

这里介绍下float布局的几种常见布局方式，如果对基础知识有疑问可以去看一下上一篇文章CSS浮动基础知识

流体布局

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

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

<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>

处理结果如下