我正在进行的一个项目需要一些建议，非常感谢您的任何帮助。
目标：
制作一个拖放式CMS，允许用户在网格上绘制元素并将它们移动到所需位置。更改以JSON格式记录，并在用户按发布按钮时转换为HTML/CSS。生成的HTML应该干净且灵活（即适用于高度/长度变化的内容）。该系统应能够处理创建电子商务网站以及简单信息网站。
问题：
在HTML中实现拖放系统的逻辑方法是使用设置了宽度和高度的absolute定位；但这种方法不适用于最终的网站，因为内容可能是可变长度的，而绝对定位的元素会脱离文档流，不知道周围的元素。
解决方案：
创建一个系统，将绝对定位的元素转换为floated元素。
例子：
在CMS系统中，用户通过在网格上绘制盒子来创建以下布局：
- 固定高度的标题
- 可变高度的导航
- 固定高度的图像
- 可变高度的主要内容页面
- 可变高度的已访问项目列表
- 固定高度的页脚
绝对布局：
HTML/CSS如下：
body {
background-color: #999999;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
margin: 15px 0;
padding: 0;
}
#mainContainer {
background-color: #FFFFFF;
height: 500px;
margin: 0 auto;
position: relative;
width: 916px;
}
.contentBlock {
border: 1px solid orange;
box-sizing: border-box;
color: orange;
font-size: 2em;
text-align: center;
}
.contentBlock:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#contentBlock1 {
height: 120px;
left: 0;
position: absolute;
top: 0;
width: 916px;
}
#contentBlock2 {
height: 100px;
left: 0;
position: absolute;
top: 140px;
width: 136px;
}
#contentBlock3 {
height: 100px;
left: 0;
position: absolute;
top: 260px;
width: 136px;
}
#contentBlock4 {
height: 220px;
left: 156px;
position: absolute;
top: 140px;
width: 604px;
}
#contentBlock5 {
height: 220px;
left: 780px;
position: absolute;
top: 140px;
width: 136px;
}
#contentBlock6 {
height: 120px;
left: 0;
position: absolute;
top: 380px;
width: 916px;
}<div id="mainContainer">
<div class="contentBlock" id="contentBlock1">1</div>
<div class="contentBlock" id="contentBlock2">2</div>
<div class="contentBlock" id="contentBlock3">3</div>
<div class="contentBlock" id="contentBlock4">4</div>
<div class="contentBlock" id="contentBlock5">5</div>
<div class="contentBlock" id="contentBlock6">6</div>
</div>float而不是absolute定位。由于如果2或4中的内容扩展，它们将超过/在3和6上方/下方，因此结果HTML不能使用absolute定位。 Float使元素保持在流中并相互感知，因此以下内容适用于2和4的动态内容：
浮动布局:
HTML / CSS可能如下所示：
body {
background-color: #999999;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
margin: 15px 0;
padding: 0;
}
#mainContainer {
background-color: #FFFFFF;
margin: 0 auto;
width: 916px;
}
.contentBlock {
border: 1px solid orange;
box-sizing: border-box;
color: orange;
font-size: 2em;
text-align: center;
}
.contentBlock:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#contentBlock1 {
margin-bottom: 20px;
height: 120px;
}
#contentBlock2 {
height: 100px;
margin-bottom: 20px;
width: 136px;
}
#contentBlock3 {
height: 100px;
margin-bottom: 20px;
width: 136px;
}
#contentBlock4 {
float: left;
height: 220px;
margin-bottom: 20px;
margin-left: 20px;
width: 604px;
}
#contentBlock5 {
float: left;
height: 220px;
margin-bottom: 20px;
margin-left: 20px;
width: 136px;
}
#contentBlock6 {
clear: left;
height: 120px;
}
#contentContainer1 {
float: left;
width: 136px;
}<div id="mainContainer">
<div class="contentBlock" id="contentBlock1">1</div>
<div id="contentContainer1">
<div class="contentBlock" id="contentBlock2">2</div>
<div class="contentBlock" id="contentBlock3">3</div>
</div>
<div class="contentBlock" id="contentBlock4">4</div>
<div class="contentBlock" id="contentBlock5">5</div>
<div class="contentBlock" id="contentBlock6">6</div>
</div>用户不需要理解浮动元素的工作原理，所以这个过程在发布更改时需要自动进行。
这个例子非常简单，但更高级的布局也需要处理。
其他CMS系统的做法：
据我所知，大多数CMS系统要么将用户固定到一个设置好的模板中，要么使用JavaScript来设置绝对定位元素的高度/位置（我想避免这种方法）。
我的问题：
- 是否有可能制定一组规则将绝对布局转换为浮动布局？
- 如果有，是否有任何现有的CMS可以实现这样的功能？
- 对于解决这个问题，有什么其他的建议吗？
谢谢。
