浮動小数点の周囲にテキストが折り返して表示されないのはなぜですか？

Question

私はHTMLをもう一度ピックアップしています（私はその言語を知っていますが、使用してからしばらくしています）、コーディング言語の仕組みについてユーザーに少し教えるウェブページを作ろうとしています。他の言語と比較してHTMLのマークアップ言語の違いについての一種のメモとして、ページの横にテキストボックスを追加したいと思います。

しかし、私のCSSファイルで、floatプロパティが正しく表示されない、と私はなぜわからない：

body { 
 
    font-family: "Courier New", "Times New Roman"; 
 
    background: black; 
 
    color: rgb(0, 200, 0); 
 
} 
 

 
.note { 
 
    margin: 10px; 
 
    border: 1px solid white; 
 
    text-indent: 0px; 
 
    padding: 2px; 
 
    float: left; 
 
}

<h1 id="top">Functions</h1> 
 
<p>C-derived languages usually have a few tricks in common, and there are some things present in virtually every language.</p> 
 
<div> 
 
    <p class="note">If you look at the HTML that made this page, you'll notice that it doesn't include almost anything described below, and in fact looks much, much different. This is because HTML is a <b>markup language</b>, not a programming language; there is a difference. 
 
    In HTML, elements are written with angle brackets (for example, <span>&lt;p&gt;</span> for a paragraph), but in most other <i>programming languages</i>, code simply floats in the file, so-to-speak. Take a look at the functions below to see the contrasts.</p> 
 
</div> 
 
<p>Different languages call them different things, but there is a name for a runnable set of code. JavaScript calls it a function; C# calls it a method - but for the most part they mean the same thing. For this, they will be called functions. Functions are simply a bunch of code that is run together, along with optional arguments, which are inputtable variables. </p>

は、テキストが実際に言っていることを心配しないでください;私はちょうどテキストがボックスの周りにラップしていない理由を知りたい。

Answer 1

それは、フローティングですが、あなたがそれに割り当てられた幅を持っていないので、それだけで全幅ですので、それが浮いてはならない表示されます。あなたは `p.note`ボックスを包み込むように期待して何をすべきか、テキスト

body { 
 
    font-family: "Courier New", "Times New Roman"; 
 
    background: black; 
 
    color: rgb(0, 200, 0); 
 
} 
 

 
.note { 
 
    margin: 10px; 
 
    border: 1px solid white; 
 
    text-indent: 0px; 
 
    padding: 2px; 
 
    float: left; 
 
    width: 30%; 
 
}

<h1 id="top">Functions</h1> 
 
<p>C-derived languages usually have a few tricks in common, and there are some things present in virtually every language.</p> 
 
<div> 
 
    <p class="note">If you look at the HTML that made this page, you'll notice that it doesn't include almost anything described below, and in fact looks much, much different. This is because HTML is a <b>markup language</b>, not a programming language; there is a difference. 
 
    In HTML, elements are written with angle brackets (for example, <span>&lt;p&gt;</span> for a paragraph), but in most other <i>programming languages</i>, code simply floats in the file, so-to-speak. Take a look at the functions below to see the contrasts.</p> 
 
</div> 
 
<p>Different languages call them different things, but there is a name for a runnable set of code. JavaScript calls it a function; C# calls it a method - but for the most part they mean the same thing. For this, they will be called functions. Functions are simply a bunch of code that is run together, along with optional arguments, which are inputtable variables. </p>

Answer 2

j08691と同じように、p.note要素はdiv要素の全幅を塗りつぶしています。<p>要素は自然に実行されるためです。 <p>に幅を与え、他のテキストを囲みます。

body { 
 
    font-family: "Courier New", "Times New Roman"; 
 
    background: black; 
 
    color: rgb(0, 200, 0); 
 
} 
 

 
.note { 
 
    width: 300px; 
 
    margin: 10px; 
 
    border: 1px solid white; 
 
    text-indent: 0px; 
 
    padding: 2px; 
 
    float: left; 
 
}

<h1 id="top">Functions</h1> 
 
<p>C-derived languages usually have a few tricks in common, and there are some things present in virtually every language.</p> 
 
<div> 
 
    <p class="note">If you look at the HTML that made this page, you'll notice that it doesn't include almost anything described below, and in fact looks much, much different. This is because HTML is a <b>markup language</b>, not a programming language; there is a difference. 
 
    In HTML, elements are written with angle brackets (for example, <span>&lt;p&gt;</span> for a paragraph), but in most other <i>programming languages</i>, code simply floats in the file, so-to-speak. Take a look at the functions below to see the contrasts.</p> 
 
</div> 
 
<p>Different languages call them different things, but there is a name for a runnable set of code. JavaScript calls it a function; C# calls it a method - but for the most part they mean the same thing. For this, they will be called functions. Functions are simply a bunch of code that is run together, along with optional arguments, which are inputtable variables. </p>