diff --git a/components/style/properties/longhands/box.mako.rs b/components/style/properties/longhands/box.mako.rs
index 407e8da2adb..627b9a8ce3a 100644
--- a/components/style/properties/longhands/box.mako.rs
+++ b/components/style/properties/longhands/box.mako.rs
@@ -67,60 +67,16 @@ ${helpers.predefined_type(
     gecko_ffi_name="mFloat"
 )}
 
-<%helpers:single_keyword
-    name="clear"
-    values="none left right both"
-    // https://drafts.csswg.org/css-logical-props/#float-clear
-    extra_specified="inline-start inline-end"
-    needs_conversion="True"
-    gecko_inexhaustive="True"
-    animation_value_type="discrete"
-    gecko_enum_prefix="StyleClear"
-    gecko_ffi_name="mBreakType"
-    spec="https://drafts.csswg.org/css-box/#propdef-clear"
+${helpers.predefined_type(
+    "clear",
+    "Clear",
+    "computed::Clear::None",
+    animation_value_type="discrete",
+    needs_context=False,
+    gecko_ffi_name="mBreakType",
+    spec="https://drafts.csswg.org/css-box/#propdef-clear",
     servo_restyle_damage="rebuild_and_reflow"
->
-    impl ToComputedValue for SpecifiedValue {
-        type ComputedValue = computed_value::T;
-
-        #[inline]
-        fn to_computed_value(&self, context: &Context) -> computed_value::T {
-            let ltr = context.style().writing_mode.is_bidi_ltr();
-            // https://drafts.csswg.org/css-logical-props/#float-clear
-            match *self {
-                SpecifiedValue::InlineStart => {
-                    context.rule_cache_conditions.borrow_mut()
-                        .set_writing_mode_dependency(context.builder.writing_mode);
-                    if ltr {
-                        computed_value::T::Left
-                    } else {
-                        computed_value::T::Right
-                    }
-                }
-                SpecifiedValue::InlineEnd => {
-                    context.rule_cache_conditions.borrow_mut()
-                        .set_writing_mode_dependency(context.builder.writing_mode);
-                    if ltr {
-                        computed_value::T::Right
-                    } else {
-                        computed_value::T::Left
-                    }
-                }
-                % for value in "None Left Right Both".split():
-                    SpecifiedValue::${value} => computed_value::T::${value},
-                % endfor
-            }
-        }
-        #[inline]
-        fn from_computed_value(computed: &computed_value::T) -> SpecifiedValue {
-            match *computed {
-                % for value in "None Left Right Both".split():
-                    computed_value::T::${value} => SpecifiedValue::${value},
-                % endfor
-            }
-        }
-    }
-</%helpers:single_keyword>
+)}
 
 ${helpers.predefined_type(
     "vertical-align",
diff --git a/components/style/values/computed/box.rs b/components/style/values/computed/box.rs
index 7b17d568dfc..f5c101cbc38 100644
--- a/components/style/values/computed/box.rs
+++ b/components/style/values/computed/box.rs
@@ -11,7 +11,7 @@ use values::generics::box_::Perspective as GenericPerspective;
 use values::generics::box_::VerticalAlign as GenericVerticalAlign;
 
 pub use values::specified::box_::{AnimationName, Contain, Display, OverflowClipBox};
-pub use values::specified::box_::Float as SpecifiedFloat;
+pub use values::specified::box_::{Clear as SpecifiedClear, Float as SpecifiedFloat};
 pub use values::specified::box_::{OverscrollBehavior, ScrollSnapType, TouchAction, TransitionProperty, WillChange};
 
 /// A computed value for the `vertical-align` property.
@@ -83,3 +83,59 @@ impl ToComputedValue for SpecifiedFloat {
         }
     }
 }
+
+#[allow(missing_docs)]
+#[cfg_attr(feature = "servo", derive(Deserialize, Serialize))]
+#[derive(Clone, Copy, Debug, Eq, Hash, MallocSizeOf, Parse, PartialEq,
+SpecifiedValueInfo, ToCss)]
+/// A computed value for the `clear` property.
+pub enum Clear {
+    None,
+    Left,
+    Right,
+    Both
+}
+
+impl ToComputedValue for SpecifiedClear {
+    type ComputedValue = Clear;
+
+    #[inline]
+    fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
+        let ltr = context.style().writing_mode.is_bidi_ltr();
+        // https://drafts.csswg.org/css-logical-props/#float-clear
+        match *self {
+            SpecifiedClear::InlineStart => {
+                context.rule_cache_conditions.borrow_mut()
+                    .set_writing_mode_dependency(context.builder.writing_mode);
+                if ltr {
+                    Clear::Left
+                } else {
+                    Clear::Right
+                }
+            },
+            SpecifiedClear::InlineEnd => {
+                context.rule_cache_conditions.borrow_mut()
+                    .set_writing_mode_dependency(context.builder.writing_mode);
+                if ltr {
+                    Clear::Right
+                } else {
+                    Clear::Left
+                }
+            },
+            SpecifiedClear::None => Clear::None,
+            SpecifiedClear::Left => Clear::Left,
+            SpecifiedClear::Right => Clear::Right,
+            SpecifiedClear::Both => Clear::Both
+        }
+    }
+
+    #[inline]
+    fn from_computed_value(computed: &Self::ComputedValue) -> SpecifiedClear {
+        match *computed {
+            Clear::None => SpecifiedClear::None,
+            Clear::Left => SpecifiedClear::Left,
+            Clear::Right => SpecifiedClear::Right,
+            Clear::Both => SpecifiedClear::Both,
+        }
+    }
+}
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 88e44487954..fa5a2425d1f 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -43,7 +43,7 @@ pub use self::font::{FontFamily, FontLanguageOverride, FontStyle, FontVariantEas
 pub use self::font::{FontFeatureSettings, FontVariantLigatures, FontVariantNumeric};
 pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
 pub use self::box_::{AnimationIterationCount, AnimationName, Contain, Display, TransitionProperty};
-pub use self::box_::Float;
+pub use self::box_::{Clear, Float};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective};
 pub use self::box_::{ScrollSnapType, TouchAction, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
diff --git a/components/style/values/specified/box.rs b/components/style/values/specified/box.rs
index 970c93ddb62..0140ac33d74 100644
--- a/components/style/values/specified/box.rs
+++ b/components/style/values/specified/box.rs
@@ -841,3 +841,17 @@ pub enum Float {
     InlineStart,
     InlineEnd
 }
+
+#[allow(missing_docs)]
+#[cfg_attr(feature = "servo", derive(Deserialize, Serialize))]
+#[derive(Clone, Copy, Debug, Eq, Hash, MallocSizeOf, Parse, PartialEq,
+         SpecifiedValueInfo, ToCss)]
+pub enum Clear {
+    None,
+    Left,
+    Right,
+    Both,
+    // https://drafts.csswg.org/css-logical-props/#float-clear
+    InlineStart,
+    InlineEnd
+}
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 600be598b6f..ad1b0f07416 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -38,7 +38,7 @@ pub use self::font::{FontFamily, FontLanguageOverride, FontStyle, FontVariantEas
 pub use self::font::{FontFeatureSettings, FontVariantLigatures, FontVariantNumeric};
 pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
 pub use self::box_::{AnimationIterationCount, AnimationName, Contain, Display};
-pub use self::box_::Float;
+pub use self::box_::{Clear, Float};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective};
 pub use self::box_::{ScrollSnapType, TouchAction, TransitionProperty, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};