天天看点

div浮动排版

<span style="font-size:14px;"><span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>div浮动排版</title>
  </head>
  
  <style>
     body{
         margin:0px 6px 2px 3px;/*上 右 下 左*/
     }
     #father{
         background-color: #ffff99;
         width: 100%;
         height: 100px;
         border:1px dashed green;
     }
     #son1{
         float: left;
     }
     #son2{
         float: left;
     }
     #son3{
         float: left;
     }
     #clear{
         clear:both;
     }
  </style>
  
  <body>
     <div>
        <div id="father">
           <div id="son1">aaaaaa</div>
           <div id="son2">bbbbbb</div>
           <div id="son3">cccccc</div>
           <div id="clear"></div>
           <div id="son4">dddddd</div> <!--son4没有浮动,但受上面影响跟着浮动 -->
        </div>
     </div>
  </body>
</html>
</span></span>