如何根据浮动元素培养html块

Question

问题＃1：

问题＃2：

之前问过这个问题，但现在有了更多描述和相关代码。在我的博客中，我设计了<ul><li></li></ul>，如：

.entry-content ul li{ margin-left: 20px; }

并使用FontAwesome图标设置<blockquote></blockquote>样式：

blockquote:before{
    content: "";
    font-family: "FontAwesome";
    left: -50px;
    position: absolute;
    top: -30px;
}

<li>问题可以直接在link#1和link#2 {{3}}问题（位于页面底部）进行检查。在两种情况下，图像块用<blockquote>定义。

当浮动元素位于附近，对象向左或向右移动时会出现问题，但是元素无法理解后来的位置，即使设置了float:left。您可以看到blockquote如何与左侧的float元素一起驻留。

如何以良好的视觉效果来解决问题？

Answer 1

要修复列表项，请将项目符号放入：

ul { list-style-position: inside; }

Read more about list-style here.

定位你的报价：

• 删除position:absolute，left和top

• 将其浮动到左侧

• 带边距的位置

blockquote:before{
    font-family: 'FontAwesome';
    font-size: 3.125rem;
    color: #ccc;
    content: '\f10d';
    float: left;
    margin-top: -0.4em;
    margin-right: 0.2em;
}