Question

我再次拿起HTML（我知道这种语言，但是因为我已经使用过它已经有一段时间了）而且我试图创建一个教会用户的网页关于编码语言如何工作的一点。我想在页面的侧面添加一个文本框，作为与其他语言相比HTML作为标记语言之间差异的一种说明。

但是，在我的CSS文件中，float属性显示不正确，我不确定原因：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

不要担心文字的实际内容;我只是想知道为什么文本没有环绕盒子。

Answer 1

就像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>

Answer 2

它是浮动的，但它只是全宽，因为你没有分配宽度，所以它看起来不是浮动的。

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>

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

2 个答案: