没有媒体查询的响应浮动

Question

我正在为其中包含float:right;的网站构建标题，以将用户信息定位到屏幕右侧。这种方法很好，除非用户使浏览器变小。用户信息然后跳到下一行，这很好，但标题不会随之扩展。

我正在尝试找出一个解决方案，使标头扩展而不使用媒体查询。使用媒体查询很好，但自然扩展会更好。

我已经整理了一个jsFiddel作为一个例子，如果我在解释我的问题上做得很糟糕。

我已经尝试了一些方法来解决这个问题。

我尝试在左角放置一个float:left;徽标，但这会使标题背景消失。然后在标题上放置overflow:auto;时会出现一个滚动条。

我也尝试使用媒体查询器手动扩展标题，但必须有更好，更清晰的方式。

非常感谢任何帮助。

header{
    background-color: #23234c;
    padding: .3em 0;        
}

header li{
    display: inline-block;
    margin:0 .5em;
    font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.topLinks{
    float: right;
}

Answer 1

尝试添加以下标题样式：

header {
    clear: both;
    overflow: hidden;
}

这将强制标题保持大于其浮动内容。