css - 带边框的段落

Question

我想为页面上的段落添加边框。

<p class="valid">paragraph</p>

CSS

p.valid {
padding:5px;
border: 1px solid #ccc;
}

问题是这会将段落显示为页面的 100%

我也试过添加内联 block ，它按照我的意愿包装文本，但内联就像向左浮动。

p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}

Answer 1

float 元素时，也将其设置为clear任何(左) float 元素:

p.valid {
    padding:5px;
    border: 1px solid #ccc;
    display: inline-block;
    float: left;
    clear: left;
}

来自MDN documentation :

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them