当段落长于一行时，浮点属性不起作用答案

【问题标题】：Float property doesn't work when paragraph is longer than one line当段落长于一行时，浮点属性不起作用
【发布时间】：2019-02-20 16:09:39
【问题描述】：

我试图使用float: left; css 属性在左侧对齐一些<p> 元素。

当文本在一行时，它在左侧正确对齐，如下图所示：

但是当文本至少有两行时，文本不再左对齐，而是居中，因为它继承自 body 的 text-align: center; 属性：

我知道我可以从 body 中删除 text-align 属性，但我想知道它为什么会发生。

有人知道为什么吗？提前致谢。

这里是html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float test</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
        <div class="left-container">
            <div class="left-container-heading">Lorem Ipsum</div>
            <br>
            <br>
            <p>Float left doesn't work anymore since it is more than one line and I would like to know why and how to fix this.
            </p>
        </div>
</body>
</html>

这里是css：

body {
    padding-top: 2em;
    text-align: center;
    width: 900px;
    margin: auto;
}

p, h, div {
    font-family: 'Corbel';
}

p {
    margin: 0;
}

.left-container {
    border: 3px solid red;
    border-right: 1px solid red;
    float: left;
    width: 446px;
    height: 100%;
}

.left-container p {
    position: relative;
    float: left;
    margin-left: 5px;
}

.left-container-heading {
    text-decoration: underline;
    font-style: italic;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

【问题讨论】：

标签： html css css-float

【解决方案1】：

因为当你的内容是 1 行时，你的 p 元素只占很小的空间，它是居中对齐的，只是你没有意识到，试试 将宽度 100% 添加到 p 元素看看有没有变。

当你的内容是2行时，p元素的宽度取最长行的宽度，内容还是居中的，你发现它是居中对齐的。

【讨论】：

【解决方案2】：

之所以会这样，是因为身体的中心对齐。移除后，它会向左浮动

body {
    padding-top: 2em;
   
    width: 900px;
    margin: auto;
}

p, h, div {
    font-family: 'Corbel';
}

p {
    margin: 0;
    float:left;
}

.left-container {
    border: 3px solid red;
    border-right: 1px solid red;
    float: left;
    width: 446px;
    height: 100%;
}

.left-container p {
    position: relative;
    float: left;
    margin-left: 5px;
}

.left-container-heading {
    text-decoration: underline;
    font-style: italic;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float test</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
        <div class="left-container">
            <div class="left-container-heading">Lorem Ipsum</div>
            <br>
            <br>
            <p>Float left doesn't work anymore since it is more than one line and I would like to know why and how to fix this.
            </p>
        </div>
</body>
</html>

【讨论】：

哈哈，太简单了。不错的收获
@ellipsis 谢谢。为什么当文本短于一行时它是左对齐的？