在网页布局设计中，我们经常会遇到需要将多个子元素横向排列并居中显示的情况。当这些子元素使用浮动（float）属性时，常规的居中方法，如设置父元素的`text-align:center`，往往不再有效。这是因为浮动元素会脱离正常的文档流，使得父元素的文本居中对齐失效。在这种情况下，我们需要采取一些特定的技巧来实现浮动子div的居中显示。
了解浮动（float）属性的作用。`float:left`或`float:right`用于使元素向左或向右移动，直到其边缘碰到包含框或另一个浮动元素的边缘。这常用于创建多列布局或使文本环绕图片。然而，一旦元素浮动，它就不再参与父元素的宽度计算，因此`text-align:center`对它们无效。
为了解决这个问题，我们可以使用以下策略：
1. 创建一个外层div（outerdiv）和一个内层div（containerdiv）。外层div用于设置居中对齐，而内层div将包裹所有浮动的子div。
2. 将外层div的`text-align:center`属性设置为`center`，这将使得内层div整体居中。
3. 内层div设置`overflow:hidden`，这可以创建一个新的块格式化上下文（BFC），防止浮动元素对其它非浮动元素的影响。
4. 内层div还需要设置`display:inline-block`，使其像一个内联元素一样显示，但同时保留块级元素的特性，如设置宽度、高度等。
5. 将子div（例如`float1`和`float2`）设置为`float:left`，使它们横向排列。
这样，尽管子div是浮动的，但由于内层div（containerdiv）被外层div（outerdiv）居中，整个结构仍然可以实现居中对齐的效果。这是一个常见的解决浮动元素居中问题的方案，适用于那些需要保持浮动布局，同时又想实现居中显示的场景。
需要注意的是，这种方法在某些旧版本的浏览器中可能不完全兼容，因此在实际开发中，可能需要结合其他技术，如Flexbox或CSS Grid，以确保更好的跨浏览器兼容性和更灵活的布局控制。Flexbox和CSS Grid提供了更为现代化的布局解决方案，能够轻松实现各种复杂的对齐和分布，包括居中显示，且无需依赖浮动。
处理浮动元素的居中显示需要理解CSS布局的基本原理，并灵活运用各种技巧。通过创建额外的容器元素和适当调整样式，我们可以克服`float`属性带来的限制，实现所需的布局效果。
