html - 如何阻止div继承父css样式

Question

我为一个网站贡献了两个 .SCSS 样式表。这样我就可以拥有一个基础和一个主页样式表。

在基本样式表中，div 有一个 float 的左侧，但是在“我们做什么”部分我希望没有 float 。我似乎无法解决这个问题。任何建议将不胜感激!

这是 JSFiddle - https://jsfiddle.net/hbyeyv6y/

这是基础 .scss -

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

这是我们所做的.scss -

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;。但是如果你想写出好的代码，将 float 分配给 body、html 等看起来不是一个好主意。 float 打破了元素的通常行为，它可能会导致你意想不到的结果。您可以添加如下类:

.f-left{
   float:left;
}

仅对您要 float 的元素。