代码类似这样的处理方式:
?
??????????? div {
??? ??? ??? ??? margin:20px 20px 20px 20px;
??? ??? ??? ??? border:solid 1px;
??? ??? ??? ??? background-color:yellow;
??? ??? ??? ??? padding:0px;
??? ??? ??? }
??? ??? ??? #father {
??? ??? ??? ??? background-color:red;
??? ??? ??? }
??? ??? ??? #div1 {
??? ??? ??? ??? float:left;
??? ??? ??? }
??? ??? ??? #div2 {
??? ??? ??? ??? float:left;
??? ??? ??? }
??? ??? ??? #div3 {
??? ??? ??? ??? float:left;
??? ??? ??? }
?
?????? <div id="father">
??? ??? ??? ??? <div id="div1">
??? ??? ??? ??? ??? div1<br />
??? ??? ??? ??? ??? div1<br />
??? ??? ??? ??? </div>
??? ??? ??? ???
??? ??? ??? ??? <div id="div2">
??? ??? ??? ??? ??? div2<br />
??? ??? ??? ??? ??? div2<br />
??? ??? ??? ??? </div>
??? ??? ??? ???
??? ??? ??? ??? <div id="div3">
??? ??? ??? ??? ??? div3<br />
??? ??? ??? ??? ??? div3<br />
??? ??? ??? ??? </div>
??? ??? </div>
这样显示的时候父div就会显示成一条线了。不会包括所有的子div
处理方式是在div3的下面
添加一个空的div，设置div的clear属性为both
?
就是
<div id="div4"></div>
这里设置
#div4 {
?????? clear:both;
?????? border:none;
}
?
就解决了。