为什么不是我的文字环绕浮动元素？

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

它是浮动的，而是因为你有没有宽度分配给它，所以它似乎不漂浮，它只是整个宽度。

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>