CSS effect: floating label in form does not work without required attribute

Has a way of solving by adding this CSS rule

.floating-labels .form-control:not(:-ms-input-placeholder)~label { }

With this rule vc does validation based on whether input has something inside or not, and not using required. If the placeholder appears it is because it has nothing inside, if it disappears it is because it has been filled

You can read more about it in this link, although it is another use case that can help you understand the concept: How to prevent a Required Input from starting with the CSS style : invalid

EDIT

For the select has a few more details. You need to make a CSS rule based on value and then use a JS to apply. To facilitate I put a ID in the parent of select

#sel .form-control:not([value=""]):valid ~ label { seu css }

And the HTML tag with the JS would look like this, so that if the value is different from value="" it applies the CSS.

<select class="form-control" onclick="this.setAttribute('value', this.value);" value="">

See your code with this rule working and without required in input

body {
    padding-top: 30px;
}
.form-control {
    background-color: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
    box-shadow: none;
    color: #565656;
    height: 38px;
    max-width: 100%;
    padding: 7px 12px;
    transition: all 300ms linear 0s
}

.form-control:focus {
    box-shadow: none;
    border-color: #313131
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 44px;
    padding: 5px 10px;
    font-size: 18px
}

.floating-labels .form-group {
    position: relative
}

.floating-labels .form-control {
    font-size: 20px;
    padding: 10px 10px 10px 0;
    display: block;
    border: none;
    border-bottom: 1px solid #e4e7ea
}

.floating-labels select.form-control>option {
    font-size: 14px
}

.has-error .form-control {
    border-bottom: 1px solid #f44336
}

.has-warning .form-control {
    border-bottom: 1px solid #ff9800
}

.has-success .form-control {
    border-bottom: 1px solid #4caf50
}

.floating-labels .form-control:focus {
    outline: 0;
    border: none
}

.floating-labels label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .form-control:focus~label,
.floating-labels .form-control:not(:placeholder-shown)~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}
.floating-labels .form-control:focus~label,
.floating-labels .form-control:not(:-ms-input-placeholder)~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}

.floating-labels .bar {
    position: relative;
    display: block
}

.floating-labels .bar:after,
.floating-labels .bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #707cd2;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .bar:before {
    left: 50%
}

.floating-labels .bar:after {
    right: 50%
}

.floating-labels .form-control:focus~.bar:after,
.floating-labels .form-control:focus~.bar:before {
    width: 50%
}

.floating-labels .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

.floating-labels .input-lg,
.floating-labels .input-lg~label {
    font-size: 24px
}


#sel label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all;
    z-index: -1;
}

#sel .form-control {
    background: none;
}

#sel .form-control:focus ~ label , 
#sel .form-control:not([value=""]):valid ~ label {
    top:-18px;
    font-size:14px;
    color:#5264AE;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <dic class="col-xs-12">
            <form class="floating-labels ">
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="numero" name="numero"  placeholder=" "><span class="highlight"></span> <span class="bar"></span>
                        <label for="numero">Número</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="bairro" name="bairro"  placeholder=" "><span class="highlight"></span> <span class="bar"></span>
                        <label for="bairro">Bairro</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="complemento" name="complemento"  placeholder=" " ><span class="highlight"></span> <span class="bar"></span>
                        <label for="complemento">Complemento</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group" id="sel">
                        <select class="form-control" onclick="this.setAttribute('value', this.value);" value="">
                            <option value=""></option>
                            <option value="1">Alabama</option>
                            <option value="2">Boston</option>
                            <option value="3">Ohaio</option>
                        </select><span class="highlight"></span><span class="bar"></span>
                        <label for="exampleFormControlSelect1">Example select</label>
                    </div>
                </div>
            </form>
        </dic>
    </div>
</div>