Css 如何隔离浮动内容？_Css

Css 如何隔离浮动内容？

css

Css 如何隔离浮动内容？,css,Css,我正在将博客帖子从blogger JSON api拉入我的页面。这些帖子是HTML格式的。一些帖子已经发布了内容；例如，向左浮动的图像，其右侧的文本比图像短。下面帖子的标题和日期也被推到了右边。我记得CSS中有一种深奥的方法来隔离div中的float。我不记得是如何实现的。我甚至不记得它叫什么了。我找了一整天。有什么想法吗 <!DOCTYPE html> <html lang="en"> <head> <title>Sandy Reads

我正在将博客帖子从blogger JSON api拉入我的页面。这些帖子是HTML格式的。一些帖子已经发布了内容；例如，向左浮动的图像，其右侧的文本比图像短。下面帖子的标题和日期也被推到了右边。我记得CSS中有一种深奥的方法来隔离div中的float。我不记得是如何实现的。我甚至不记得它叫什么了。我找了一整天。有什么想法吗

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sandy Reads - News</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style></style>
</head>
<body>
    <div class="container-fluid">
        <section id="posts">
            <div class="page-header">
                <h1>Sandy Reads <small>News</small></h1>
            </div>
        </section>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
    <script>
        $(function () {
            var key = "Redacted";
            var blogId = "Redacted";
            var resource = "https://www.googleapis.com/blogger/v3/blogs/" + blogId + "/posts?maxResults=10&key=" + key;

            $.getJSON(resource, function (data) {
                var items = [];
                $.each(data.items, function (key, val) {
                    var kind = val.kind;
                    if (kind !== 'blogger#post')
                        return;

                    var blogId = val.id;
                    var title = val.title;
                    var content = val.content;
                    var date = moment(val.updated);

                    items.push("<li id='" + blogId + "' class='post'>" +
                        "<a href='blog.html?id=" + blogId + "'><h3>" + title + "</h3></a>" +
                        "<i>" + date.format('MMMM Do YYYY') + "</i></div>" +
                        "<div>" + content + "</div>" + 
                        "</li>");
                });

                $("<ul/>", {
                    "class": "list-group my-new-list",
                    html: items.join("")
                }).appendTo("#posts");
            });
        });
    </script>
</body>
</html>

您可能会想到overflow:hidden，但应用它的元素取决于标记的外观。我可以告诉你把它应用到浮动的父对象，但是如果被推到一边的内容出现在同一个父对象中，那就没有用了

好的，您的脚本在一系列li.post元素中生成post。内容显示在标题和日期后的div中。您可以将li.post设置为清除浮点数，也可以将overflow:hidden应用于div。在您的发布日期之后，可能会出现一个虚假的结束标记，您可能需要对此进行说明