一种是左浮动：{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>
其实分多少都行，看你的实际布局需求。但是常见的比较合理的是分12栏。
栅格系统的原理
假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N
W = c*N + g*(N-1) + 2m；g的宽度通常为m的两倍，所以：
W = (c+g) * N；把c+g记为C，得：
W = C * N
大部分的栅格系统都是此公式的变体。
用过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的时候, 我的列的类目,就呈现两倍放大
这样一个响应式的栅格化布局就写好了,
