Question

我无法理解float属性。我有这段代码：

#p1 {
  border: solid black 3px
}

<p id="p1" style="float:left">Paragraph 1</p>
<a href="https://facebook.com" style="float:left"> This is a link </a>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

现在，我期望的结果是在第一行中有Paragraph1，然后是它旁边的链接，然后是链接旁边的Paragraph2和第二行中的Paragraph3。但是这段代码给我的结果是：

Answer 1

即使不使用浮点数也可以这样做（仅通过将display：inline-block应用于前3个元素）：

<body>
<p id="p1"> Paragraph 1 </p>
<a id="a1" href="https://facebook.com">This is a link</a>
<p id="p2">Paragraph 2</p>
<p>Paragraph 3</p>
</body>

css：

#p1 { 
border: solid black 3px;
}

#p1,#a1,#p2{
display: -moz-inline-stack; 
display: inline-block; 
zoom: 1; 
*display: inline;

}

这是小提琴： http://jsfiddle.net/9mumaxwm/

这种方法的推荐人：

1）您可以垂直对齐元素（使用vertical-align：middle或其他）

2）你可以控制元素的包装（通过将white-space：nowrap应用到父容器）

P.S。不要让显示的多个声明：上面提到的内联可怕你。这是一个声誉良好的标准黑客，甚至可以在古老的IE和Mozillas上运行

Answer 2

如果我理解你需要什么，你只想将链接与段落内的文字对齐。为什么不把链接放在里面然后看起来会很好：

<p id="p1"> Paragraph 1 <a href="https://facebook.com"> This is a link </a></p>

<p>Paragraph 2</p>
<p>Paragraph 3</p>

jsfiddle

如果你坚持认为它会在段落之外，那么：

只需编辑你的css：

p {
    float: left;
    width:100%;
}
#p1 {
    width: auto;
    margin: 0;
}

jsfiddle

Answer 3

您获得看似奇怪结果的原因是由于您正在浮动的元素的边框，边距和填充。

默认情况下，浮动元素将浮动到其容器元素的顶部和左侧/右侧，替换已存在的任何元素。在浮动元素的情况下，它们向左浮动，并且它们推动第2段和第34段;在右边。如果您查看第1段，您会发现它上面有浏览器的默认样式，它的上下边距为16px（在我的浏览器上为Chrome）。看看＆＃34;这是一个链接＆＃34;元素，你会发现它没有边距。因此，第1段的顶部边缘和3px顶部边界被压缩了19px，而＃34;这是一个链接＆＃34;可以浮起来靠在封闭元素的顶部。

如果你想要段落1,2和＆＃34;这是一个链接＆＃34;排队，最简单的方法是将段落1的边界/边距设置为0，这样两者在文本上方的空间垂直空间就相等。如果您想要第1段的粗边框，请调整其他两个元素的边距，以便在顶部提供3px空间。

＆＃13;

p {
   margin: 0;
}
.floatL {
    float: left;
}

＆＃13;

<p id="p1" class="floatL">Paragraph 1</p>
<a href="https://facebook.com" class="floatL"> This is a link </a>
<p id="p2">Paragraph 2</p>
<p>Paragraph 3</p>

＆＃13;

以下是第1段边框的示例：

＆＃13;

p {
   margin: 0;
}
#p1, #p2, a {
   border: 3px solid black;
}
#p2, a {
   border-color: transparent;
}
.floatL {
    float: left;
}

＆＃13;

<p id="p1" class="floatL">Paragraph 1</p>
<a href="https://facebook.com" class="floatL"> This is a link </a>
<p id="p2">Paragraph 2</p>
<p>Paragraph 3</p>

＆＃13;

Answer 4

试试这个http://jsfiddle.net/r5mvwdft/1/

代码更新为式

p{
    float:left;
    margin:0;
}
a{
    float:left;
}
#p1{
    border:2px solid black;
}

HTML

<p id="p1">Paragraph 1</p>
<a href="https://facebook.com"> This is a link </a>
<p>Paragraph 2</p>
<br/>
<p>Paragraph 3</p>

垂直对齐和浮动：左

4 个答案: