图片浮动页脚也浮动答案

【问题标题】：Floating of image float footer also图片浮动页脚也浮动
【发布时间】：2014-10-23 08:19:51
【问题描述】：

图片浮动有点麻烦。

我有一个简单的页面，其中有一些文章标题、perex 和文章图像，它们都在一个容器中，底部包含页脚。

我希望图像位于容器的左侧，文本从右侧漂浮在图像周围，从图像填充几 px，它的全部在页眉和页脚下应该在容器中的整个内容之下。

但是现在当我试图在图像周围浮动这个文本时，它会做这样的事情。

这是我的 HTML：

index.html.twig

{% extends 'NatalyCooksBlogBundle::layout.html.twig' %}
{% block content %}
                <article class="article">
                    <header>
                        <h1>
                            This is the header of article
                        </h1>
                    </header>
                            <img class="pure-img article-image" src="{{ asset('uploads/articles/bug2.png') }}" float="right">
                        <p class="perex">
                            This is the perex
                        </p>
                </article>
{% endblock %}

layout.html.twig

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">

    <title>Side Menu &ndash; </title>



    <link rel="stylesheet" href="{{asset('admin/css/pure-min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/style.css')}}">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">







    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="{{asset('admin/css/layouts/side-menu.css')}}">
    <!--<![endif]-->

</head>
<body>
<div class="pure-g">
        <div class="pure-u-5-5 container">
            <div class="header">
            </div>
            <center>
            <div class="pure-menu pure-menu-open pure-menu-horizontal">
                <a href="#" class="pure-menu-heading">Site Title</a>

                <ul>
                    <li class="pure-menu-selected"><a href="#">Home</a></li>
                    <li><a href="#">Flickr</a></li>
                    <li><a href="#">Messenger</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Finance</a></li>
                </ul>
            </div>
            </center>
            {% block content %} {% endblock %}

            <footer class="footer"><br>Created by NAMI Production, 2014</footer>
        </div>
</div>
<script src="{{asset('admin/js/ui.js')}}"></script>


</body>
</html>

style.css

body {
    background-color: mintcream;
}

.container {
    background-color: #ffffff;
    margin-left: 20%;
    margin-right: 20%;
    border-bottom: none;
    /*margin-right: 20%;*/
}

.header {
    width: inherit;
    padding-top: 30px;
    border-bottom: none;
}

.menu-center {
    padding-left: 12%;
}

.article {
    text-align: center;
}

.perex {
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    float: right;
}

.article-image {
    padding-left: 5%;
    max-width: 35%;
    float: left;
}

.footer {
    height: 50px;
    background-color: greenyellow;
    color: #000000;
    font-size: 100%;
    text-align: center;
}

【问题讨论】：

标签： html css image

【解决方案1】：

将以下 css 添加到您的内容块（必须有一个类、一个标签或一个 id）：

.yourclass:after{
    clear:both;
    content:'';
    display:block;
}

【讨论】：

【解决方案2】：

您应该尝试将clear:both; 添加到您的.article 类。

【讨论】：

可悲的是，它没有帮助:(