float 用作内联样式，但当我将其移动到外部样式表时不起作用答案

【问题标题】：float works as an inline style but not when i move it to an external style sheetfloat 用作内联样式，但当我将其移动到外部样式表时不起作用
【发布时间】：2012-03-23 17:33:30
【问题描述】：

所以我在搞乱 asp.net，我似乎陷入了 CSS 问题。当我将 div 向右内联浮动时，它按预期工作。但是，当我将此样式移动到外部样式表时，它根本不起作用。
我意识到内联样式具有更高的优先级，并且可能会遇到一些问题，但我似乎无法弄清楚是什么。

这是我的页面

        <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

***********************the div below that has style="float:right"****************
            <div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>
********************************************************************************

            <div class="ColumnLeft" >
                //stuff
            </div>
                <div class="SiteMap">
                    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                        <CurrentNodeStyle Font-Bold="True" />
                        <NodeStyle CssClass="ContentLink" Font-Bold="True" />
                        <RootNodeStyle CssClass="ContentLink" Font-Bold="True" />
                    </asp:SiteMapPath>
                </div>
            <div class="ColumnCenter">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            </div>
        </div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        </form>
    </body>
    </html>

这是样式表

    body {
    }
    .Header
    {
        background-color: #6699FF;
        font-family: Verdana;
        font-size: xx-large;
        font-weight: bold;
        color: #FFFFFF;
        padding: 40px 0px 0px 10px;
        width: 100%;
    }
    .ColumnLeft
    {
        padding: 7px;
        background-color: #6699FF;
        float: left;
    }

    a
    {
        color: #000000;
        text-decoration: none;
    }
    a:visited
    {
        color: #000000;
        text-decoration: none;
    }
    a:link
    {
        color: #000000;
        text-decoration: none;
    }
    a:hover
    {
        color: #FFFFFF;
        text-decoration: underline;
    }
    .underline
    {
        text-decoration: underline;
    }
    .ColumnCenter
    {
        margin: 7px 7px 7px 175px;
    }
    a:hover.ContentLink
    {
        color: #000000;
        text-decoration: underline;
    }
    .SiteMap
    {
        font-size: large;
        background-color: #DFEAFF;
    }

当我在外部样式表中使用它时，就是这段代码

 <div class="test">asp label</div>

我的 CSS 表单添加了这个

.test
{
   float:right;
}

问题：那么，为什么当我将样式放在内联时它似乎可以工作，但当我将那段确切的代码移动到外部样式表时它却不起作用？

【问题讨论】：

如果您在浏览器的开发者工具中检查您的元素，您通常可以看到哪些规则会覆盖您元素上的哪些规则，因为被覆盖的规则会被删除（至少在 Chrome 中，不确定其他）。因此，您可以追踪是哪种样式覆盖了您的设置。

标签： css html css-float inline

【解决方案1】：

内联样式是最后应用的。使用Firebug 或开发人员工具来查看当您将其设为外部时是否有另一种“更接近”的样式覆盖了您的样式（您的样式将被划掉）。

要取代内联样式，请使用!important override：

.test {
    float: right !important;
}

【讨论】：

我强烈反对在生产环境中使用!important，最好通过增加选择器的特异性来找到实际问题并解决问题。使用!important ，您的 CSS 很容易变得难以维护。
谢谢，我已经有一段时间没有玩 CSS 了，我忘记了关于 firebug 的一切。问题是 Firefox 缓存了我的旧样式表，而我的更改没有更新。但是，当我更改内联样式时，它们正在更新。再次感谢！
@ChristoferEliasson 我同意。我见过的唯一合法用途是从第三方元素修改沙盒样式，例如社交按钮。
@paislee 同意，在一些极端情况下它可能有用。

【解决方案2】：

看看你的代码布局，你会发现这里有一些有趣的嵌套，可能会抛出一些东西进行循环。

所以你有这个：

<div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>

你说当你把它带到外部样式表时你把它切换到这个：

<div class="test">asp label</div>

因此，您有一个 Header div，其中嵌套了一个 div，该嵌套 div 的内部。然后，您关闭该嵌套并添加您的随机文本“Stephen Granets Site！”然后关闭 Header div。

如果我们采用这种方法会怎样：

<div class="headerWrapper"><div class="Header">Stephen Granets Site!</div><div class="label"><asp:Label ID="lblMasterMessage" runat="server" /></div></div>

这使您能够为 CSS 设置类似的内容：

.headerWrapper{
background-color: #6699FF;
font-family: Verdana;
font-size: xx-large;
font-weight: bold;
color: #FFFFFF;
padding: 40px 0px 0px 10px;
width: 100%;
margin:0 auto; /* this should center align your containing div */
}

.Header{
font-size:large;
float:left;
width:50%;
}

.label{
float:right; /* If you have your paddings and margins set correctly you could just float this to the left as well */

width:50%;
}

这对你有好处吗？您是否尝试将 Header div 和标签彼此相邻堆叠？这就是我写这篇文章时的假设。

【讨论】：