我对css伪元素有一个奇怪的问题。我试图为我的段落元素设计一个首字母。我使用：第一种类型的伪elment。一切都很糟糕。然后我想在文本右侧添加一个信息框。我使用了pseudo-element：before。当我这样做时，initial将它的高度更改为before-ment的高度。我架起一把小提琴来展示我的代码：
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
div.project_content:before {
content: "";
float: right;
height: 200px;
width: 0;
}<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>问题是div.project_content:before中的height同时影响#facts和p。
如果要偏移右侧框并在其上方的文本中留出空白，请在#facts:上使用margin-top: 200px
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
margin-top: 200px;
}<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>如果您希望文本环绕#facts元素，我建议您只需将#facts<div>移动到您希望它出现的HTML结构中：
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}<div class="project-vorsch">
<div class="project_content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales.
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>希望这能有所帮助！：)