扩展盒子的高度

来源：互联网发布：一句话证明你了解java 编辑：程序博客网时间：2024/04/29 22:53

三个盒子都不在标准流中，div是没有高度的。

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>float属性</title><style type="text/css"></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3<br>Box-3<br>Box-3<br>Box-3</div><div class="clear"></div></div></body></html>

body {    font-family: Arial;    font-size: 12px;    margin: 15px;}.father {    background-color: #FFFF99;    border: 1px solid #111111;    padding: 5px;}.father div {    background-color: #90BAFF;    border: 1px dashed #111111;    margin: 15px;    padding: 10px;}.father p {    background-color: #FF90BA;    border: 1px dashed #111111;    clear: right;}.son1 {    float: left;}.son2 {    float: left;}.son3 {    float: right;}.father .clear {    border: 0 none;    clear: both;    margin: 0;    padding: 0;}

下面是CSS：

.son1 {float:left;}

.son2 { float: left;}

.son3 { float: right;}

.father .clear { border: 0 none; clear: both; margin: 0; padding: 0;}