我有以下代码
<div class="site-branding">
<h1 class="site-title"><a href="http://localhost/Test/" rel="home">Test</a></h1>
</div>
<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false">Navigation</button>
在我的 CSS 上，我将 site-branding 设置为向左浮动，然后将 menu-toggle 设置为向右浮动。在正常分辨率下，显示效果很好。品牌位于标题的左侧，菜单切换按钮位于右侧，但当屏幕变小时，我希望菜单切换按钮位于网站品牌 div 下方，但我得到的行为是菜单-toggle 与网站品牌 div 发生冲突。任何想法如何解决这个问题？谢谢。
最佳答案
Float 将忽略元素的碰撞框。当屏幕太小时，您将不得不使用媒体查询将新的 CSS 应用到您的标题。
例如，如果您的品牌是 300 像素宽，而您的切换是 60 像素宽，您应该使用 max-width: 360px 的媒体查询，定位另一个 CSS 文件，该文件将把切换放在您的下方品牌形象。
关于html - float 时Div和Button元素碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32690301/