css浮动框 |css3.0 书籍

.float-box {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
}

上面的代码是一个简单的浮动框样式。其中，float: left;表示元素向左浮动，width: 200px;和height: 200px;分别指定元素的宽度和高度，margin-right: 20px;则是指定元素与其它元素之间的间距。

需要注意的是，在使用浮动框布局时，如果子元素高度不一致，会导致父元素高度塌缩。解决方法是在父元素中添加overflow: hidden;属性，以触发BFC（块级格式化上下文）。

.parent {
overflow: hidden;
}

除了左浮动，CSS还支持右浮动、清除浮动样式等。右浮动与左浮动相似，只需要将float: left;改为float: right;即可。清除浮动则是指在浮动元素之后添加一个空元素，并将其样式设置为clear: both;。

.clearfix::after {
content: "";
display: block;
clear: both;
}

总之，CSS浮动框是一种常用的元素布局方式，灵活性较高，能够实现各种复杂的布局效果。但需要注意避免父元素高度塌缩的问题，并且在使用时要考虑到兼容性和响应式布局的问题。