여분의 스타일 태그로만 작동하는 CSS float 속성

HTML CSS에 대해 이해할 수없는 내용이 있습니다. 이 코드를 사용할 때 :여분의 스타일 태그로만 작동하는 CSS float 속성

<!DOCTYPE html> 
<html> 
<head> 
<title>STC </title> 
<link href="bootstrap.css" rel="stylesheet"> 
<script src="bootstrap.js"></script> 

<style type="text/css"> 
... 
.loginHeader{ 
    float: right; 
    padding: 5px; 
} 
.navLinks{ 
    float: left; 
    padding: 5px; 
} 
</style> 
</head> 
<body> 
<div class="topBar"> 
<div class="navLinks"> 
<a href=""> Home</a> | <a href=""> About</a> | <a href=""> Suggestions</a> | <a href=""> Terms & Conditions</a> 
</div> 
<div class="loginheader"> 
     croberts | <a href="/myContracts/">My Contracts</a> | <a href='?logout'>Logout </a> 

</div> 
</div> 
... 
</body> 
</html>

내 플로트 권한이 내가 원하는대로 작동하지 않습니다. 하지만 doctype 선언 전에 파일의 맨 처음 부분에 <style></style>을 추가하면 완벽하게 작동합니다. 그렇다면 왜 그런 스타일이 그 스타일에 어떤 영향을 미칩니 까? 그 밖의 모든 것은 그것이해야하는 것처럼 보입니다. 그것은 단지 부유물 문제입니다.

출처

2013-03-08 Chase Roberts

코드가 복사하여 붙여 넣을 때 모든 것이 잘 보입니다. loginheader div는 페이지의 오른쪽을보고 실제로 문제가 무엇입니까? – Sachin