如何阻止DIV继承父级CSS样式

Question

我有两个.scs样式表，为一个网站做出了贡献。这样我就可以拥有一个基地和家庭样式。

在基本样式表中，div具有左侧的浮标，但是在我们所做的部分中，我希望那里没有浮子。我似乎无法解决这个问题。任何建议将不胜感激！

这是jsfiddle -https：//jsfiddle.net/hbyeyv6y/

这是base .scss-

body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; }

这是我们所做的.scs-

div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; }
    div.whatwedo .inner { float: none; }
    div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; }
    div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; }
    div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; }
    div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; }
    div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; }
    div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; }
    div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; }
    div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; }

Answer 1

如前所述，您可以为其他规则进行float: none !important;和initial !important;。但是，如果您想编写良好的代码，将浮动浮动到身体，html等看起来并不是一个好主意。Float打破了元素的通常行为，它可能会导致您取得意外的结果。您可以添加以下词组：

.f-left{
   float:left;
}

仅适用于您要浮动的元素。

Answer 2

.whatwedo不是浮动的 - 虽然它是父母，而所有的后代都是。在所有事物上设置浮动是不好的；你为什么需要浮动一切？

即使这样回答您的问题 - 您可以使用通配符选择器为所有.whatwedo的后代提供浮标...

.whatwedo * {float: none;}