当段落长于一行时，Float 属性不起作用

Question

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

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

但是当文本至少有两行时，文本不再左对齐，而是居中，因为它继承自 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;
}

Answer 1

由于 body 上的居中对齐，所以会这样。移除后，它向左浮动

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>

Answer 2

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

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

当段落长于一行时，Float 属性不起作用

Float property doesn't work when paragraph is longer than one line

html

css

css-float

当段落长于一行时，Float 属性 不起作用

Float property doesn't work when paragraph is longer than one line

html

css

css-float

当段落长于一行时，Float 属性不起作用