0

以下の例では、 http ：//www.w3schools.com/css/tryit.asp？filename = trycss_float6

<head>
<style>
div.container
{
    width:100%;
    margin:0px;
    border:1px solid gray;
    line-height:150%;
}
div.header,div.footer
{
    padding:0.5em;
    color:white;
    background-color:gray;
    clear:left;
}
h1.header
{
    padding:0;
    margin:0;
}
div.left
{
    float:left;
    width:160px;
    margin:0;
    padding:1em;
}
div.content
{
    margin-left:190px;
    border-left:1px solid gray;
    padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
 from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

div.contentからマージンを削除すると、div.contentの境界がコンテナーの境界とオーバーラップします。つまり、div.contentはdiv.leftとオーバーラップしますが、div.contentのテキストはdiv.leftのテキストに従います。次に、問題は、なぜその動作がそうなのかということです。テキストは重なっていないが、余白は重なっている。いくつかのdivのfloatについて言及する場合、たとえばページの左端からどれだけ離れているかについて言及することなく、それらは互いに続きます。2つのシナリオを区別する方法は？

理解にご協力いただきありがとうございます。

4

2 に答える 2

0

フローティングは、もともとレイアウトレンダリングに使用することを意図したものではありませんでした。主な目的は、画像（または他の要素）の周りにテキストを折り返すことです。これはあなたが見ている振る舞いです。

要素をフロートさせると、それらは「ブロック」要素とは見なされなくなり、その幅は要素を含むことができる最小サイズに「シュリンクラップ」されます。そのため、複数の要素を並べてフロートさせると、先行する要素が前の要素と重ならないようになります。

于 2013-03-25T19:56:02.267 に答える
0

content-divからマージンを削除したため、コンテナーとcontent-divのマージンはマージされず、代わりに、left-divの幅（表示されない）がcontent-divのマージンとして機能します。しかし、content-divのデータがleft-divに指定された高さを超えて増加すると、データはオーバーフローし、left-divからマージンを取ります。

于 2013-03-25T20:08:55.853 に答える