一种是左浮动：{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>
通常首选方法是使用 flexbox 居中内容。只需三行代码即可： display:flex ，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
css：
使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
css:
使用css transform 居中元素，前提是容器元素必须设置为 position:relative ，然后子元素使用 left:50%和 top:50% 偏移子元素，最后使用 translate（-50%，-50%） 以抵消其偏移的位置。
代码如下：
html：
css：
最后，表格居中是一种旧技术，在使用旧浏览器时，您可能会喜欢这种技术。前提是容器元素设置为 display:table ，然后子元素设置为 display: table-cell ，最后使用 text-align: center 水平居住和 vertical-align: middle 垂直居中。
代码如下：
html：
css:
用过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的时候, 我的列的类目,就呈现两倍放大
这样一个响应式的栅格化布局就写好了,
