CSS @media查询匹配时元素background-color未正常显示问题求助

问题根因 #

你遇到的不是CSS优先级问题，而是浮动元素高度塌陷导致的布局重叠：

• 类名为.medyalarim1的三个卡片元素全部设置了float: left，浮动元素会脱离普通文档流，导致它们的父容器.medyalarim无法被内容撑开，高度变为0。
• 后续的#hakkimda是普通块级元素，会直接跟在高度为0的.medyalarim后面渲染，起始位置接近页面顶部。
• 小屏状态下三个.medyalarim1宽度变为100%，总高度达到900px，浮动元素层级高于普通文档流元素，直接覆盖了高度只有330px的#hakkimda区域，你看到的白色其实是三个卡片的背景，#hakkimda的tomato背景被完全挡住了，所以不管你加多少!important都不会生效。
• 你原代码中#hakkimda的注释里已经写了要加clear: both清除浮动影响，只是被你注释掉了，这就是问题的核心。

解决方案 #

给#hakkimda的样式取消clear: both的注释即可，修改后的#hakkimda样式如下：

#hakkimda {
    padding-top: 30px;
    clear: both; /* 取消这行的注释，清除前面浮动元素的影响 */
    height: 330px;
    background-color: tomato;
    color: black;
}

修改后#hakkimda会自动跳过所有前面的浮动元素，渲染在三个卡片的下方，背景色就会正常显示，不需要保留!important声明。

内容的提问来源于stack exchange，提问作者PhysicsEnginering