父div中的匣子全部是浮动盒子的处理方式

父div中的盒子全部是浮动盒子的处理方式

代码类似这样的处理方式:

 

            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;

}

 

就解决了。