ホームページ >ウェブフロントエンド >htmlチュートリアル >ここでなぜ float が必要なのか教えてください。 _html/css_WEB-ITnose

ここでなぜ float が必要なのか教えてください。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:54:571178ブラウズ




このコードで float を使用する必要があるのはなぜですか?エレメントを浮かさないと抜けないのですが、このような使い方をしているのでしょうか?マスターに指摘してもらいましょう

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head>     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />     <title>模仿京东</title> </head><style type="text/css" media="screen">*{  margin: 0px;  padding: 0px;}    .top{            width:100%;            height: 30px;            background: #eee;        }   #ad{    margin: 0 auto;    display:block;    margin-top: 10px;  }    .sousuo{        width: 1210px;        height: 90px;        background: #1f5aa8;        margin: 0 auto;        margin-top: 10px;    }    .daohang{            width: 1210px;            height: 40px;            background: #666;            margin: 0 auto;            margin-top: 10px;    }    .main{                height: 410px;        width: 1210px;        border: 2px solid orange;        margin: 10px auto;    }    .main .zuobian{        background: #DB7093;        height: 410px;        width: 209px;        float: left;    }    .zhongjian{                width: 690px;        height: 410px;        float: left;        /*margin:2px;*/        background: #D8BFD8;            }    .zhongs{            width: 671px;            height: 240px;            background: red;            margin-left:10px;                }    .zhongx{            width: 671px;            height: 150px;            background:#0096ff;              margin-left: 10px;                }.youbian{        height: 410px;    width: 310px;    background: #315a63;    float: left;}.youbian .s{                height: 70px;        width: 310px;        background: #1223a3;float: left;         }.youbian .s{height: 133px;width: 310px;background: #616351; float: left;}.youbian .z{    height: 137px;    width: 310px;    background: #0096ff;     float: left;}.youbian .x {    height: 137px;    width: 310px;    background: #e4e4e4;    float: left;}</style> <body><!-- 顶部开始 -->     <div class="top"> </div><!-- 顶部结束 --><!-- 广告开始 --><img src="gg.jpg" alt="我是广告哈哈哈哈" id="ad"><!-- 广告结束 --><!-- sousuo的部位 --><div class="sousuo">     </div><!-- sousuo结束 --><!-- 导航开始 --><div class="daohang">    </div><!-- 导航结束 --><div class="main">    <div class="zuobian">        </div>    <div class="zhongjian">        <div class="zhongs"></div>        <div class="zhongx"></div>    </div>    <div class="youbian">        <div class="s"></div>        <div class="z"></div>        <div class="x"></div>    </div></div> </body> </html> 
E


返信 ディスカッション (解決策)

高さ: 70px;
幅: 310px;
背景:#1223a3;フロート: 左。
; }


2 .s を書きました

浮かなくても大丈夫です


浮かなくても大丈夫です
浮かなければ抜け出せません

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。