图像重叠DOM元素边框

Question

我有一个CSS问题。我页面上浮动的图像与段落的边框重叠。

样式如下：

.paragraph {
    border:1px solid #DDDDDD;
}

.image {
    float:right;
}

这里是版画屏幕：

我的问题是：如何让它表现得像这样？

这是JSfiddle。先谢谢你们！

Answer 1

经过几个小时的研究，我发现了一个非常简单的解决方案。

我们只需要在盒装段落中添加一行代码：

overflow: hidden;

请参阅JSFiddle了解结果。

但无论如何，谢谢！

Answer 2

首先更改HTML结构

        <div class="left-content">
            <p class="boxed-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat.</p>
            <p class="boxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat optio nulla totam voluptatem! Tenetur.</p>
        </div>


            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" alt="HTML5_logo" class="image-right">

            <div class="clearfix"></div>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat optio nulla totam voluptatem! Tenetur.</p>

之后添加了以下CSS：

.boxed {
    padding:20px 40px;
    border:1px solid #DDDDDD;
 }
.image-right {
    float:right;
    width:150px;
}
.left-content {
    float: left;
    margin-bottom: 30px;
    width: 80%;
}
.boxed-1{
    margin-bottom:10px;
}
.clearfix{
    clear:both;
}

Answer 3

您可以尝试使用http://jsfiddle.net/yx3o7z1v/11/。

我将宽度更改为百分比，并为框提供宽度。

    .boxed {
    padding:20px 40px;
    border:1px solid #DDDDDD;
    width:60%;
}
.image-right {
    float:right;
    width:20%;
    max-width:150px;
    position:relative;
}

p { position:relative; }