一种是左浮动：{float:left}
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float语法：
float : none | left |right
参数值：
none : 对象不浮动
left : 对象浮在左边
right : 对象浮在右边
<div class="divcss5">
<div class="divcss5_left">布局靠左浮动</div>
<div class="divcss5_right">布局靠右浮动</div>
<div class="clear"></div><!-- html注释：清除float产生浮动 -->
</div>
二种内联样式：{display:inline}。
例子：
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</html>
先聊聊布局方面的知识，先列据一个实现三栏水平布局（左右定宽，中间自适应）案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。
相同点：
差异点：
DOM节点结构：
双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。
绝对定位 position: absolute 使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
栅格
以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通俗一点的就是在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。
栅格布局的作用
栅格布局的使用
现大多数UI框架设计上都会设计栅格化系统，比如 bootstrap(jquery) 、 element(vue) 、 antD(react) 等。
Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例（宽度百分比）的思想，实现响应式布局。
Bootstrap将屏幕大小分为4类，主要关键点是媒体查询 @media 。
官网中对Layout 布局的定义是： 通过基础的 24 分栏，迅速简便地创建布局.Element是基于 vue.js 开发的UI框架，其设计的栅格系统也与 Bootstrap 类似，可选 flex 方式满足现代浏览器，组件开发的目的都是为了解决基本布局定位的问题。
主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：
antD 是Ant Design 团队基于 React 开发的一套企业级后台UI框架，其栅格整个设计建议区域按照 24 等分的原则进行划分
支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序
参照 Bootstrap 的 响应式设计，预设六个响应尺寸：
怎么实现一个基本栅格化？
通常一个基本的栅格化系统包括：
为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度 max-width 。
行元素用于防止里面的列（ column ）溢出到其他的行。通常会使用 clearfix 来清除浮动，因为我们是通过浮动来制作栅格系统的。
列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。
列的位置
Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中，列的定位。先选取使用 float ，如果列都是空的，浮动的列都会贴在彼此的顶部。为了避免这种情况：
列的宽度
由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66
这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。
列的间隙 (Column Gutters)
由于列的宽度单位是响应式的百分比(%)，我们给列元素的间距是固定单位的 padding（px单位） ，为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。
为了适配更多分辨率的布局，我们只需改变列的宽度。
比如当屏幕宽度小于1000px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列。
当屏幕宽度比1000px还小时
用过Bootsrtap或者element-ui等ui框架都知道,每个ui框架里面 基本上都会自带有栅格化布局,
本文也会进行一个简单的栅格化布局的实现( 采用float方案 ), 希望对你们有所帮助
效果预览
1, html 中
嵌套结构, 外层为row, 里层为column
2, css 中
2.1 row行设置, 防止float: left带来的溢出
清除浮动, 并设置盒子模型为ie盒子模型, 这样row部分就设置好了
2.2 column 列设置 我这里是使用了24格的栅格化布局,
设置 float: left并定义初始宽度, 这里采用的是24格,所以一个的宽度是 24/100 = 1/x , 计算得出 x = 0.24 width: 4.166666666666667%
如果采用了scss或者其他css预编译器 就可使用里面的算术运算符进行计算了,
下面就算定义每一个column具体类目的宽度了
这样简单的栅格化布局其实已经好了, 那如何实现pc切换到移动端时候,响应式自动换行及变换宽高呢呢?
2.3 使用媒体查询, 当最大宽度大于800的时候, 我的列的类目,就呈现两倍放大
这样一个响应式的栅格化布局就写好了,
