0

そのため、理由がわからない奇妙な動作に気付いたときに、cssfloatプロパティを調べていました。

これは、4つのdivのコードとプレビューへのリンクです。最初の2つは左右にフロートし、3番目と前後は通常のdivです。

3番目のdivが2番目のdivとオーバーラップすることは理解していますが、3番目のdivのコンテンツが下にシフトした理由がわかりません。2番目のdivの後ろに隠れてはいけませんか？

PS私は、3番目のdivのclearプロパティを使用して問題を修正できることを知っていますが、この動作の背後にある理由についてもっと心配しています。

コード：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #ccc;
}
body {
    width: 600px;
    background: #fff;
    margin: 2em auto 2em;
    font: 100% Arial, Helvetica, sans-serif;
}
div {
    margin-bottom: 1em;
    margin-right: 2em;
    width: 85px;
    height: 50px;
    border: 1px solid #000;
    padding: 25px;
}
/*add styles here*/
.element1 {
    background: rgb(26, 78, 175);
    float:right;
    color:white;
}
.element2 {
    background: rgb(85, 66, 54);
    float:left;
    color:white;
}
.element3 {
    background: rgb(247,120,37);
}
.element4 {
    background: rgb(211, 206, 61);
}

?
</style>
</head>
<body>
    <div class="element1">Element 1 floated right</div>
    <div class="element2">Element 2 floated left</div>
    <div class="element3">Element 3 normal flow</div>
    <div class="element4">Element 4 normal flow</div>
</body>
</html>
4

3 に答える 3

2

要素が他のすべての要素を押し下げていない場合は、フロートをクリアする必要があります

   <style>
    .clear {
        clear:both;
    }  
    </style>

    <div class="element1">Element 1 floated right</div>
    <div class="element2">Element 2 floated left</div>
    <p class='clear'></p> <!-- Usualy I use a div but you slyle all !-->
    <div class="element3">Element 3 normal flow</div>
    <div class="element4">Element 4 normal flow</div>
于 2012-09-16T20:47:52.443 に答える
1

実際、float要素を使用する場合は、常にクリアする必要があります。そうしないと、他の要素がfloat要素にオーバーラップします。これは、例のようにfloat要素の後にクリアされないため、.element3クラスをクリアしたためです。

.element3 {
    background: rgb(247,120,37);
    clear:both;
}

デモを参照してください：-http：//jsfiddle.net/ZpQuu/6/

于 2012-09-17T05:21:39.883 に答える
0

このドキュメント内で私の質問に対する答えを見つけました。

ドキュメントからの引用：

フロートがフローにないため、フロートボックスの前後に作成された非配置ブロックボックスは、フロートが存在しないかのように垂直に流れます。ただし、フロートの横に作成されたラインボックスは、フロートボックス用のスペースを確保するために短縮されています。フロートボックスの前の現在の行のコンテンツは、フロートの反対側にある最初の使用可能な行にリフローされます。

つまり、基本的にドキュメントの内容は、フロート要素はドキュメントの通常のフローに追加された要素のBoxモデルとオーバーラップできますが、コンテンツとオーバーラップすることはできません。つまり、オーバーラップした要素のコンテンツは、オーバーラップしていないスペースに制限されます。

PSこれまでのところ、フローティング動作を次のように抽象化しました。

要素1：浮動要素

Element2：配置されていない要素

1-Element2のボックスモデルを描画します。

2-Element1のボックスモデルとそのコンテンツを描画します。

3-Element2にまだ重複していないスペースがある場合は、そのコンテンツで埋め始めます。

4-スペースがコンテンツ全体を保持できない場合は、Element2ボックスモデルの下にそれらを追加し始めます。

これがお役に立てば幸いです。

ところで、質問に貢献してくれたすべての人に感謝し、+1します。

于 2012-09-17T06:34:37.610 に答える