This div's border is a floating line instead of an actual border - html

Question

I might be missing something basic. It's so simple:
.items {
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
jsFiddle
Moving the class from the anchor to the div will make it (the border) disappear all together.

Answer 1

Well, your <a class="lamgswitch"> does not have any content... The float: left; makes the <div class="items">float out of it...
So try to remove it, and replace it with display: inline-block;, as the div is a block component, and you placed it inside an inline component (a)...
.items {
display: inline-block;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>

Answer 2

Place the <a> tag inside the <div> rather than the other way around.
.items{
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px ;
}
.langswitch{
border: 3px solid #86D1DA;
border-radius: 5px;
}
<div class="items">Italiano</div>
Hope this helps.

Answer 3

Technically, placing the <a> inside the <div> is the semantically correct way to do this as described in the other answer.
If you really HAVE to do it this way, you need to change the display of the <a> tag from inline to inline-block.