css div没有扩展以适应成像浮动

Question

我有一个div，我想在右边保留一个图像。

问题是div没有扩展以适应图像。我给了div一个背景来检查。

这是jsfiddle http://jsfiddle.net/BJ7YZ/

非常简单的代码

我尝试了什么

我查看了this question

我尝试做同样的事情。我给div .header课一个明确的课程，即：

.clear{
    clear: both;
}

我给了包含图片的div，.logo_container此修复：

.logo_container:after, .logo_container::before {
    clear: both;
}

他们都没有奏效。 我知道问题是因为我没有设置.header的高度，但我不需要设置高度。

Answer 1

解决此问题的一种方法如下：

.header{
    width: 100%;
    background-color: red;
    position: relative;
    overflow: auto;
}

添加overflow: auto会创建一个新的块格式化上下文，并且浮动的子元素会被限制在父容器的边缘内。

请参阅：http://jsfiddle.net/audetwebdesign/zptjb/

Answer 2

您需要清除容器本身。今天最简单的方法是使用这个可爱，简单，清晰的“黑客”。请参阅更新的小提琴

http://jsfiddle.net/BJ7YZ/2/

和

http://nicolasgallagher.com/micro-clearfix-hack/

.header:before,
.header:after {
    content: " ";
    display: table;
}

.header:after {
    clear: both;
}

Answer 3

您是否尝试过将display: inline-block;提供给标题类？它似乎做了伎俩。我可以通过应用来看到红色背景。