css文件里的div只有第一个样式有用，后面的样式统统不能用

求助大佬，设置外联css之后发现div样式只有header能用，后面的article是直接完全没有效果，把样式复制回原jsp文件之后能用，但是在外部就是不能用，求解

css代码

@charset "UTF-8";

#header
{
       background-color:#222266;
       color:#FFFFFF;
    padding:2px;
    margin:0px;
}

#article
{
    background-color:#FFFFFF;
    width:350px;
    float:left;
    padding:10px;
}

body
{
    margin:0px;
    text-align:center;
    background: url(../images/IndexBackground.jpg) no-repeat center center;
     background-attachment:fixed;
    background-size:cover;
}
a{text-decoration:none}

jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>

<div id="header">

<div style="text-align:left;">
&nbsp;&nbsp;
<img alt="标题" src="images/title.png" width="200">

<p style="float:right;">
<a href="about.jsp"style="color:#FFFFFF">技术支持</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="about.jsp"style="color:#FFFFFF">登录</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="about.jsp"style="color:#FFFFFF">注册</a>
&nbsp;&nbsp;
</p>
</div>

</div>

<p style="color:#FFFFFF">欢迎访问个人博客+α</p>

<div id="article">
<p>愚夫愚妻，愚不可及！愚不可及，愚不可及！</p>
<p>愚兄愚弟，愚不可及！愚不可及，愚不可及！</p>
<p>愚弟愚妹，愚不可及！愚不可及，愚不可及！</p>
<p>愚子愚妻，愚不可及！愚不可及，愚不可及！</p>
</div>

<div id="article">
<p>吹一气，吹一气，吹一气……</p>
</div>

<img alt="小兔崽子" src="images/Obake.jpg">

</body>
</html>

然后效果是这样的，下面的article完全没有划分，上面的header一切正常

img

本地测试你的代码没问题，是不是你浏览器缓存的问题，就是#article样式后面才加的。

清除下浏览器缓存再访问试试，有帮助请点个采纳，谢谢~

你这背景图看起来都费劲 要不就把字体调亮一点 要不就把背景调亮一点
你是指哪里没有生效 float：left没生效吗

似乎没什么问题