xhtml div+css浮动

来源：互联网发布：淘宝商城魅族编辑：程序博客网时间：2024/06/06 03:16

摘自《网页开发手记》

效果图：

xhml代码：

<!DOCTYPE html        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>    <title>div的浮动和清除</title>    <style type="text/css">        *{margin: 0px; padding: 0px;}        .all{            width: 400px;            height: 170px;            background-color: #600;            margin: 0px auto;        }        .one,.two,#three_1,#three_2,#three_3,#three_4{            width: 120px;            height: 50px;            background-color: #eee;            border: 1px solid #000;        }        .one{float: left;}        .two{float: right;}        #three_2{clear: both;}    </style></head><body>    <div class="all">        <div class="one">第一个</div>        <div class="two">第二个</div>        <div id="three_1" style="float: left">第三个</div>    </div>    <div class="all">        <div class="one">第一个</div>        <div class="two">第二个</div>        <div id="three_2">第三个</div>    </div>    <div class="all">        <div class="one">第一个</div>        <div id="three_3" style="float: left">第二个</div>        <div class="two" style="clear: both">第三个</div>    </div>    <div class="all">        <div class="one">第一个</div>        <div id="three_4" style="clear: both">第二个</div>        <div class="two">第三个</div>    </div></body></html>

注意：如果不设置three_1的float属性，会被前一个浮动div给覆盖。试了一下如果设置了其width属性就会出现这种情况，不设置则不会

0 0