HTML5のdiv要素のオーバーラップ

次のコードで3 divを作成しました。 1つ目はナビゲーション要素、もう1つはセクション要素です。HTML5のdiv要素のオーバーラップ

上記のコードを実行すると、ナビゲーションの境界線と両方のセクションが表示されます。私の疑問は、第1セクション左の要素の境界がナビゲーションバーの境界線の右側にあることです。しかし、が存在しないため（コードを実行すると見えます）、これはdiv "a" と "b"が重なっていることを意味します。私は正しい方法で考えていますか？もし私がであれば、CSSはdivをオーバーラップさせるこのように設計されています。

実際、これはCSSにdivを導入した理由と矛盾します。

nav { 
 
    float: left; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
section { 
 
    border: 3px solid red; 
 
}

<div class="a"> 
 
    <nav> 
 
    <span>nav</span> 
 
    <ul> 
 
     <li><a target="_blank" href="/default.asp">Home</a> 
 
     </li> 
 
     <li><a target="_blank" href="default.asp">CSS</a> 
 
     </li> 
 
     <li><a target="_blank" href="/html/default.asp">HTML</a> 
 
     </li> 
 
     <li><a target="_blank" href="/js/default.asp">JavaScript</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="b"> 
 
    <section> 
 
    <span>section</span> 
 
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> 
 
    </section> 
 
</div> 
 
<div class="c"> 
 
    <section> 
 
    <span>section</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce 
 
     luctus vestibulum augue ut aliquet.</p> 
 
    </section> 
 
</div>

出典

2016-08-17 Dhrub Kumar

は、あなたが実際にどのような重複しているものを参照するには、ブラウザの点検要素ツールを使用することがありますか？ – deceze

参照：http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why – Wake

その実際には重複しません。あなたの赤い枠線が3pxの幅であるので、そうそうです。私が1pxにしたときにどうなるか見てみましょう。

EDIT

私はでnavにフロートをクリア：

<div style="clear:both"></div>

、今それが重なっていません。これは、要素を浮動させるときの予想される動作です。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 

 
nav { 
 
    float: left; 
 
    width: 200px; 
 
border:1px solid black; 
 
} 
 

 
section { 
 
    border: 1px solid red; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<div class="a"> 
 
<nav> 
 
    <span>nav</span> 
 
    <ul> 
 
     <li><a target="_blank" href="/default.asp">Home</a></li> 
 
     <li><a target="_blank" href="default.asp">CSS</a></li> 
 
     <li><a target="_blank" href="/html/default.asp">HTML</a></li> 
 
     <li><a target="_blank" href="/js/default.asp">JavaScript</a></li> 
 
    </ul> 
 
    </nav> 
 
    <div style="clear:both"></div> 
 
</div> 
 
<div class="b"> 
 
<section> 
 
    <span>section</span> 
 
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> 
 
    </section> 
 
</div>

出典

2016-08-17 09:59:43 kukkuz

nav要素の境界線を削除すると、重なった部分が –

div 'a'は高さがなく、 'a'の中に' nav'が浮動しているからです。 – kukkuz

@DhrubKumarフロートをクリアしましたが、今は重なっていません。これは、要素を浮動させるときの予想される動作です。 – kukkuz

あなたがそれらをオーバーラップしたくない場合はporblemはfloat です。あなたの.aブロックが何の高さを持っていないdemo

nav { 
 
/* float: left; */ 
 
    height: 100%; 
 
    width: 200px; 
 
    border:1px solid black; 
 
    } 
 
    .container{ 
 
    display: flex; 
 
    height: 100%; 
 
    } 
 

 
    section { 
 
    border: 3px solid red; 
 
    } 
 
    nav ul{ 
 
margin:0; 
 
    }

<div class="container"> 
 
<div class="a"> 
 
<nav> 
 
    <span>nav</span> 
 
    <ul> 
 
     <li><a target="_blank" href="/default.asp">Home</a></li> 
 
     <li><a target="_blank" href="default.asp">CSS</a></li> 
 
     <li><a target="_blank" href="/html/default.asp">HTML</a></li> 
 
     <li><a target="_blank" href="/js/default.asp">JavaScript</a></li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="b"> 
 
<section> 
 
    <span>section</span> 
 
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p> 
 
    </section> 
 
</div> 
 
</div> 
 
    <div class= "c"> 
 
<section> 
 
    <span>section</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p> 
 
    </section> 
 
</div>

出典

2016-08-17 10:04:28

しかし、divの重複の意義は何ですか？ –

あなたの '.a'クラスが** div' .b'の上に浮いているのでオーバーラップしていますあなたはフロートをそこに残しました –

です。ここflex-box

を試してみてください。それ

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

div要素をfloatに設定されていると幅が設定されている

<div class="a clearfix"> 
    //rest of code

出典

2016-08-17 10:07:04 AlexG

にclearfixを追加し、divの高さは、divの内側のコンテンツにajustます。そしてそれが、次のdivのベローをあふれさせる理由です。 div "b"を使って最初の行の高さを設定しています。

です、このあなたが何をした後：

https://jsfiddle.net/53q6e9hz/

nav { 
    float: left; 
    width: 200px; 
    border: 1px solid black; 
} 
section { 
    border: 3px solid red; 
    display:block; 
} 
.b{ 
width:calc(100% - 202px); 
float: left; 
} 
.row1{ 
    display:inline-block; 
}

出典

2016-08-17 10:16:55

HTML5のdiv要素のオーバーラップ

答えて

関連する問題