width:600px;
height: 300px;
}
.p{
border:solid 3px #a33;
}
.c{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
</body>
</html>
我们希望看到的效果是:
结果出现如下:
解决方案:
解决方法一般有2种。
1.利用 clear属性,清除浮动
2.使父容器形成BFC
清除浮动的方法,我们可以用如下办法:
对父元素加一个class
XML/HTML Code复制内容到剪贴板
<div class="p floatfix">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
</div>
添加如下CSS










