[{"data":1,"prerenderedAt":385},["Reactive",2],{"content-query-Lt5CItWf0p":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":380,"_id":381,"_source":382,"_file":383,"_extension":384},"/docs/utilities/css/clearfix","css",false,"","CSS Utility Classes - Clearfix - Inkline","Use the clearfix utility to clear floated content within a container.",{"type":11,"children":12,"toc":375},"root",[13,20,27,33,38,52,267,274,279,370],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Clearfix",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"use-the-clearfix-utility-to-clear-floated-content-within-a-container",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":30},"p",{},[31],{"type":26,"value":32},"You can easily clear floats by adding the clearfix utility class to the parent element.",{"type":14,"tag":28,"props":34,"children":35},{},[36],{"type":26,"value":37},"In the following example, without adding the clearfix helper, the wrapping div would display the two buttons on separate lines, which would cause a broken layout.",{"type":14,"tag":39,"props":40,"children":41},"ul",{},[42],{"type":14,"tag":43,"props":44,"children":45},"li",{},[46],{"type":14,"tag":47,"props":48,"children":49},"code-inline",{},[50],{"type":26,"value":51},"_clearfix",{"type":14,"tag":53,"props":54,"children":55},"content-tabs",{},[56,65],{"type":14,"tag":57,"props":58,"children":59},"template",{"v-slot:preview":7},[60],{"type":14,"tag":61,"props":62,"children":64},"content-preview",{"src":63},"/stories/utilities/clearfix/basic",[],{"type":14,"tag":57,"props":66,"children":67},{"v-slot:vue":7},[68],{"type":14,"tag":69,"props":70,"children":75},"code",{"className":71,"code":73,"language":74,"meta":7},[72],"language-vue","\u003Ctemplate>\n    \u003Cdiv class=\"_clearfix!\">\n        \u003CIButton class=\"_float:left!\"> Floating Left Button \u003C/IButton>\n        \u003CIButton class=\"_float:right!\"> Floating Right Button \u003C/IButton>\n    \u003C/div>\n\u003C/template>\n\n","vue",[76],{"type":14,"tag":77,"props":78,"children":79},"pre",{},[80],{"type":14,"tag":69,"props":81,"children":82},{"__ignoreMap":7},[83,105,145,190,232,249],{"type":14,"tag":84,"props":85,"children":88},"span",{"class":86,"line":87},"line",1,[89,95,100],{"type":14,"tag":84,"props":90,"children":92},{"class":91},"ct-553616",[93],{"type":26,"value":94},"\u003C",{"type":14,"tag":84,"props":96,"children":98},{"class":97},"ct-914029",[99],{"type":26,"value":57},{"type":14,"tag":84,"props":101,"children":102},{"class":91},[103],{"type":26,"value":104},">\n",{"type":14,"tag":84,"props":106,"children":108},{"class":86,"line":107},2,[109,114,119,124,130,135,141],{"type":14,"tag":84,"props":110,"children":111},{"class":91},[112],{"type":26,"value":113},"    \u003C",{"type":14,"tag":84,"props":115,"children":116},{"class":97},[117],{"type":26,"value":118},"div",{"type":14,"tag":84,"props":120,"children":121},{"class":91},[122],{"type":26,"value":123}," ",{"type":14,"tag":84,"props":125,"children":127},{"class":126},"ct-762058",[128],{"type":26,"value":129},"class",{"type":14,"tag":84,"props":131,"children":132},{"class":91},[133],{"type":26,"value":134},"=",{"type":14,"tag":84,"props":136,"children":138},{"class":137},"ct-952708",[139],{"type":26,"value":140},"\"_clearfix!\"",{"type":14,"tag":84,"props":142,"children":143},{"class":91},[144],{"type":26,"value":104},{"type":14,"tag":84,"props":146,"children":148},{"class":86,"line":147},3,[149,154,160,164,168,172,177,182,186],{"type":14,"tag":84,"props":150,"children":151},{"class":91},[152],{"type":26,"value":153},"        \u003C",{"type":14,"tag":84,"props":155,"children":157},{"class":156},"ct-028869",[158],{"type":26,"value":159},"IButton",{"type":14,"tag":84,"props":161,"children":162},{"class":91},[163],{"type":26,"value":123},{"type":14,"tag":84,"props":165,"children":166},{"class":126},[167],{"type":26,"value":129},{"type":14,"tag":84,"props":169,"children":170},{"class":91},[171],{"type":26,"value":134},{"type":14,"tag":84,"props":173,"children":174},{"class":137},[175],{"type":26,"value":176},"\"_float:left!\"",{"type":14,"tag":84,"props":178,"children":179},{"class":91},[180],{"type":26,"value":181},"> Floating Left Button \u003C/",{"type":14,"tag":84,"props":183,"children":184},{"class":156},[185],{"type":26,"value":159},{"type":14,"tag":84,"props":187,"children":188},{"class":91},[189],{"type":26,"value":104},{"type":14,"tag":84,"props":191,"children":193},{"class":86,"line":192},4,[194,198,202,206,210,214,219,224,228],{"type":14,"tag":84,"props":195,"children":196},{"class":91},[197],{"type":26,"value":153},{"type":14,"tag":84,"props":199,"children":200},{"class":156},[201],{"type":26,"value":159},{"type":14,"tag":84,"props":203,"children":204},{"class":91},[205],{"type":26,"value":123},{"type":14,"tag":84,"props":207,"children":208},{"class":126},[209],{"type":26,"value":129},{"type":14,"tag":84,"props":211,"children":212},{"class":91},[213],{"type":26,"value":134},{"type":14,"tag":84,"props":215,"children":216},{"class":137},[217],{"type":26,"value":218},"\"_float:right!\"",{"type":14,"tag":84,"props":220,"children":221},{"class":91},[222],{"type":26,"value":223},"> Floating Right Button \u003C/",{"type":14,"tag":84,"props":225,"children":226},{"class":156},[227],{"type":26,"value":159},{"type":14,"tag":84,"props":229,"children":230},{"class":91},[231],{"type":26,"value":104},{"type":14,"tag":84,"props":233,"children":235},{"class":86,"line":234},5,[236,241,245],{"type":14,"tag":84,"props":237,"children":238},{"class":91},[239],{"type":26,"value":240},"    \u003C/",{"type":14,"tag":84,"props":242,"children":243},{"class":97},[244],{"type":26,"value":118},{"type":14,"tag":84,"props":246,"children":247},{"class":91},[248],{"type":26,"value":104},{"type":14,"tag":84,"props":250,"children":252},{"class":86,"line":251},6,[253,258,262],{"type":14,"tag":84,"props":254,"children":255},{"class":91},[256],{"type":26,"value":257},"\u003C/",{"type":14,"tag":84,"props":259,"children":260},{"class":97},[261],{"type":26,"value":57},{"type":14,"tag":84,"props":263,"children":264},{"class":91},[265],{"type":26,"value":266},">",{"type":14,"tag":268,"props":269,"children":271},"h3",{"id":270},"sass-mixin",[272],{"type":26,"value":273},"Sass Mixin",{"type":14,"tag":28,"props":275,"children":276},{},[277],{"type":26,"value":278},"The clearfix utility is also available as a Sass Mixin.",{"type":14,"tag":69,"props":280,"children":285},{"className":281,"code":283,"language":284,"meta":7},[282],"language-scss","@import '@inkline/inkline/css/mixins';\n\n.element {\n  @include clearfix;\n}\n","scss",[286],{"type":14,"tag":77,"props":287,"children":288},{},[289],{"type":14,"tag":69,"props":290,"children":291},{"__ignoreMap":7},[292,315,323,336,362],{"type":14,"tag":84,"props":293,"children":294},{"class":86,"line":87},[295,301,305,310],{"type":14,"tag":84,"props":296,"children":298},{"class":297},"ct-149352",[299],{"type":26,"value":300},"@import",{"type":14,"tag":84,"props":302,"children":303},{"class":91},[304],{"type":26,"value":123},{"type":14,"tag":84,"props":306,"children":307},{"class":137},[308],{"type":26,"value":309},"'@inkline/inkline/css/mixins'",{"type":14,"tag":84,"props":311,"children":312},{"class":91},[313],{"type":26,"value":314},";\n",{"type":14,"tag":84,"props":316,"children":317},{"class":86,"line":107},[318],{"type":14,"tag":84,"props":319,"children":320},{},[321],{"type":26,"value":322},"\n",{"type":14,"tag":84,"props":324,"children":325},{"class":86,"line":147},[326,331],{"type":14,"tag":84,"props":327,"children":328},{"class":126},[329],{"type":26,"value":330},".element",{"type":14,"tag":84,"props":332,"children":333},{"class":91},[334],{"type":26,"value":335}," {\n",{"type":14,"tag":84,"props":337,"children":338},{"class":86,"line":192},[339,344,349,353,358],{"type":14,"tag":84,"props":340,"children":341},{"class":91},[342],{"type":26,"value":343},"  ",{"type":14,"tag":84,"props":345,"children":346},{"class":297},[347],{"type":26,"value":348},"@include",{"type":14,"tag":84,"props":350,"children":351},{"class":91},[352],{"type":26,"value":123},{"type":14,"tag":84,"props":354,"children":355},{"class":126},[356],{"type":26,"value":357},"clearfix",{"type":14,"tag":84,"props":359,"children":360},{"class":91},[361],{"type":26,"value":314},{"type":14,"tag":84,"props":363,"children":364},{"class":86,"line":234},[365],{"type":14,"tag":84,"props":366,"children":367},{"class":91},[368],{"type":26,"value":369},"}",{"type":14,"tag":371,"children":372},"style",[373],{"type":26,"value":374},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-028869{color:#B31D28;font-style:italic;}\n.dark-theme .ct-028869{color:#FDAEB7;font-style:italic;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}",{"title":7,"searchDepth":107,"depth":107,"links":376},[377],{"id":23,"depth":107,"text":9,"children":378},[379],{"id":270,"depth":147,"text":273},"markdown","content:docs:utilities:css:clearfix.md","content","docs/utilities/css/clearfix.md","md",1794582261305]