diff -u b/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
--- b/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -616,15 +616,16 @@
 /* Field display */
 .field__label {
   font-weight: bold;
+  vertical-align: top;
 }
-.field-label--inline .field__label,
-.field-label--inline .field__items {
-  float:left; /*LTR*/
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+  display: inline-block;
   padding-right: 0.5em;
 }
-[dir="rtl"] .field-label--inline .field__label,
-[dir="rtl"] .field-label--inline .field__items {
-  float: right;
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
   padding-left: 0.5em;
 }
 
diff -u b/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig
--- b/core/modules/system/templates/field.html.twig
+++ b/core/modules/system/templates/field.html.twig
@@ -23,6 +23,9 @@
  * - content_attributes: HTML attributes for the content.
  * - items: List of all the field items.
  * - item_attributes: List of HTML attributes for each item.
+ * - field_type:
+ * - field_name:
+ * - field_label:
  *
  * @see template_preprocess_field()
  *
@@ -33,16 +36,16 @@
 {#
 {{ attributes.class }} provides a way for modules to add classes to fields
 dynamically.
-
-{{ attributes }} , {{ title_attributes }} & {{ item_attributes[delta] }} ...
 #}
-{% set cssclass %}
-field field-name--{{ field_name }} field-type--{{ field_type }} field-label--{{ field_label }}{{ attributes.class }}
+{% set classes %}
+field field--name-{{ field_name }} field--type-{{ field_type }} field--label-{{ field_label }}{{ attributes.class }}
 {% endset %}
 
 {% if multiple and not label_hidden %}
 {#
-  <div class="{{ cssclass }}field--multiple">
+  the field is a multiple value field with a visible label
+  Finale markup pattern:
+  <div class="{{ classes }}field--multiple">
     <div class="field__label">Label</div>
     <div class="field-items">
       <div class="field_item">Data</div>
@@ -50,8 +53,8 @@
     </div>
   </div>
 #}
-  <div class="{{ cssclass }}field--multiple"{{ attributes }}>
-    <div class="field__label"{{ title_attributes }}>{{ label }}</div>
+  <div class="{{ classes }}"{{ attributes|without('class') }}>
+    <div class="field__label"{{ title_attributes }}>{{ label }}:</div>
     <div class="field__items"{{ content_attributes }}>
       {% for delta, item in items %}
         <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
@@ -61,13 +64,14 @@
 
 {% elseif multiple and label_hidden %}
 {#
-  <div class="{{ cssclass }}field--multiple field-items">
+  We check if its a multiple value field and if its label is hidden
+  <div class="{{ classes }}field-items">
       <div class="field_item">Data</div>
       <div class="field_item">Data</div>
     </div>
   </div>
 #}
-  <div class="{{ cssclass }}field--multiple field__items"{{ attributes }}{{ content_attributes }}>
+  <div class="{{ classes }}field__items"{{ attributes|without('class') }}{{ content_attributes }}>
     {% for delta, item in items %}
       <div class="field__item"{{ item_attributes[delta] }}>{{ item }}</div>
     {% endfor %}
@@ -75,26 +79,28 @@
 
 {% elseif not multiple and not label_hidden %}
 {#
-  <div class="{{ cssclass }}field--single">
+  The field is a single field with the label visible
+  <div class="{{ classes }}">
     <div class="field_label">Data</div>
     <div class="field_item">Data</div>
   </div>
 #}
-  <div class="{{ cssclass }}field--single"{{ attributes }}>
-    <div class="field__label"{{ title_attributes }}>{{ label }}</div>
+  <div class="{{ classes }}"{{ attributes|without('class') }}>
+    <div class="field__label"{{ title_attributes }}>{{ label }}:</div>
     {% for delta, item in items %}
       <div class="field__item"{{ content_attributes }}{{ item_attributes[delta] }}>{{ item }}</div>
     {% endfor %}
   </div>
 
-{% elseif not multiple and not label_visible %}
+{% elseif not multiple and label_hidden %}
 {#
-  <div class="{{ cssclass }}field--single field__item">
+  The field is a single field with no label
+  <div class="{{ classes }}field__item">
     data
   </div>
 #}
   {% for delta, item in items %}
-    <div class="{{ cssclass }}field--single field__item"{{ attributes }}{{ content_attributes }}{{ item_attributes[delta] }}>{{ item }}</div>
+    <div class="{{ classes }} field__item"{{ attributes|without('class') }}{{ content_attributes }}{{ item_attributes[delta] }}>{{ item }}</div>
   {% endfor %}
 
 {% endif %}
diff -u b/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
--- b/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -703,11 +703,9 @@
   margin-bottom: -5px;
 }
 .submitted .field-name--field-user-picture img {
-  float: left; /* LTR */
   margin: 1px 20px 0 0; /* LTR */
 }
 [dir="rtl"] .submitted .field-name--field-user-picture img {
-  float: right;
   margin-left: 20px;
   margin-right: 0;
 }