[{"data":1,"prerenderedAt":453},["Reactive",2],{"content-query-cVgl3GtyYU":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":448,"_id":449,"_source":450,"_file":451,"_extension":452},"/docs/utilities/css/float","css",false,"","CSS Utility Classes - Float - Inkline","You can use the float utility on any element, for any breakpoint.",{"type":11,"children":12,"toc":445},"root",[13,20,27,33,63,431,440],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Float",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"you-can-use-the-float-utility-on-any-element-for-any-breakpoint",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":30},"p",{},[31],{"type":26,"value":32},"You can use the float utility classes to float an element to the left or right, or to disable floating, responsively. The utilities use the same viewport breakpoints as the grid system.",{"type":14,"tag":34,"props":35,"children":36},"ul",{},[37,47,55],{"type":14,"tag":38,"props":39,"children":40},"li",{},[41],{"type":14,"tag":42,"props":43,"children":44},"code-inline",{},[45],{"type":26,"value":46},"._float:left",{"type":14,"tag":38,"props":48,"children":49},{},[50],{"type":14,"tag":42,"props":51,"children":52},{},[53],{"type":26,"value":54},"._float:right",{"type":14,"tag":38,"props":56,"children":57},{},[58],{"type":14,"tag":42,"props":59,"children":60},{},[61],{"type":26,"value":62},"._float:none",{"type":14,"tag":64,"props":65,"children":66},"content-tabs",{},[67,76],{"type":14,"tag":68,"props":69,"children":70},"template",{"v-slot:preview":7},[71],{"type":14,"tag":72,"props":73,"children":75},"content-preview",{"src":74},"/stories/utilities/float/basic",[],{"type":14,"tag":68,"props":77,"children":78},{"v-slot:vue":7},[79],{"type":14,"tag":80,"props":81,"children":86},"code",{"className":82,"code":84,"language":85,"meta":7},[83],"language-vue","\u003Ctemplate>\n    \u003Cdiv class=\"_clearfix!\">\n        \u003Cdiv class=\"_float:left!\">I'm floating left.\u003C/div>\n    \u003C/div>\n\n    \u003Cdiv class=\"_clearfix!\">\n        \u003Cdiv class=\"_float:right!\">I'm floating right.\u003C/div>\n    \u003C/div>\n\n    \u003Cdiv class=\"_clearfix!\">\n        \u003Cdiv class=\"_float:none!\">I'm not floating.\u003C/div>\n    \u003C/div>\n\u003C/template>\n\n","vue",[87],{"type":14,"tag":88,"props":89,"children":90},"pre",{},[91],{"type":14,"tag":80,"props":92,"children":93},{"__ignoreMap":7},[94,116,156,199,216,225,257,299,315,323,355,397,413],{"type":14,"tag":95,"props":96,"children":99},"span",{"class":97,"line":98},"line",1,[100,106,111],{"type":14,"tag":95,"props":101,"children":103},{"class":102},"ct-553616",[104],{"type":26,"value":105},"\u003C",{"type":14,"tag":95,"props":107,"children":109},{"class":108},"ct-914029",[110],{"type":26,"value":68},{"type":14,"tag":95,"props":112,"children":113},{"class":102},[114],{"type":26,"value":115},">\n",{"type":14,"tag":95,"props":117,"children":119},{"class":97,"line":118},2,[120,125,130,135,141,146,152],{"type":14,"tag":95,"props":121,"children":122},{"class":102},[123],{"type":26,"value":124},"    \u003C",{"type":14,"tag":95,"props":126,"children":127},{"class":108},[128],{"type":26,"value":129},"div",{"type":14,"tag":95,"props":131,"children":132},{"class":102},[133],{"type":26,"value":134}," ",{"type":14,"tag":95,"props":136,"children":138},{"class":137},"ct-762058",[139],{"type":26,"value":140},"class",{"type":14,"tag":95,"props":142,"children":143},{"class":102},[144],{"type":26,"value":145},"=",{"type":14,"tag":95,"props":147,"children":149},{"class":148},"ct-952708",[150],{"type":26,"value":151},"\"_clearfix!\"",{"type":14,"tag":95,"props":153,"children":154},{"class":102},[155],{"type":26,"value":115},{"type":14,"tag":95,"props":157,"children":159},{"class":97,"line":158},3,[160,165,169,173,177,181,186,191,195],{"type":14,"tag":95,"props":161,"children":162},{"class":102},[163],{"type":26,"value":164},"        \u003C",{"type":14,"tag":95,"props":166,"children":167},{"class":108},[168],{"type":26,"value":129},{"type":14,"tag":95,"props":170,"children":171},{"class":102},[172],{"type":26,"value":134},{"type":14,"tag":95,"props":174,"children":175},{"class":137},[176],{"type":26,"value":140},{"type":14,"tag":95,"props":178,"children":179},{"class":102},[180],{"type":26,"value":145},{"type":14,"tag":95,"props":182,"children":183},{"class":148},[184],{"type":26,"value":185},"\"_float:left!\"",{"type":14,"tag":95,"props":187,"children":188},{"class":102},[189],{"type":26,"value":190},">I'm floating left.\u003C/",{"type":14,"tag":95,"props":192,"children":193},{"class":108},[194],{"type":26,"value":129},{"type":14,"tag":95,"props":196,"children":197},{"class":102},[198],{"type":26,"value":115},{"type":14,"tag":95,"props":200,"children":202},{"class":97,"line":201},4,[203,208,212],{"type":14,"tag":95,"props":204,"children":205},{"class":102},[206],{"type":26,"value":207},"    \u003C/",{"type":14,"tag":95,"props":209,"children":210},{"class":108},[211],{"type":26,"value":129},{"type":14,"tag":95,"props":213,"children":214},{"class":102},[215],{"type":26,"value":115},{"type":14,"tag":95,"props":217,"children":219},{"class":97,"line":218},5,[220],{"type":14,"tag":95,"props":221,"children":222},{},[223],{"type":26,"value":224},"\n",{"type":14,"tag":95,"props":226,"children":228},{"class":97,"line":227},6,[229,233,237,241,245,249,253],{"type":14,"tag":95,"props":230,"children":231},{"class":102},[232],{"type":26,"value":124},{"type":14,"tag":95,"props":234,"children":235},{"class":108},[236],{"type":26,"value":129},{"type":14,"tag":95,"props":238,"children":239},{"class":102},[240],{"type":26,"value":134},{"type":14,"tag":95,"props":242,"children":243},{"class":137},[244],{"type":26,"value":140},{"type":14,"tag":95,"props":246,"children":247},{"class":102},[248],{"type":26,"value":145},{"type":14,"tag":95,"props":250,"children":251},{"class":148},[252],{"type":26,"value":151},{"type":14,"tag":95,"props":254,"children":255},{"class":102},[256],{"type":26,"value":115},{"type":14,"tag":95,"props":258,"children":260},{"class":97,"line":259},7,[261,265,269,273,277,281,286,291,295],{"type":14,"tag":95,"props":262,"children":263},{"class":102},[264],{"type":26,"value":164},{"type":14,"tag":95,"props":266,"children":267},{"class":108},[268],{"type":26,"value":129},{"type":14,"tag":95,"props":270,"children":271},{"class":102},[272],{"type":26,"value":134},{"type":14,"tag":95,"props":274,"children":275},{"class":137},[276],{"type":26,"value":140},{"type":14,"tag":95,"props":278,"children":279},{"class":102},[280],{"type":26,"value":145},{"type":14,"tag":95,"props":282,"children":283},{"class":148},[284],{"type":26,"value":285},"\"_float:right!\"",{"type":14,"tag":95,"props":287,"children":288},{"class":102},[289],{"type":26,"value":290},">I'm floating right.\u003C/",{"type":14,"tag":95,"props":292,"children":293},{"class":108},[294],{"type":26,"value":129},{"type":14,"tag":95,"props":296,"children":297},{"class":102},[298],{"type":26,"value":115},{"type":14,"tag":95,"props":300,"children":302},{"class":97,"line":301},8,[303,307,311],{"type":14,"tag":95,"props":304,"children":305},{"class":102},[306],{"type":26,"value":207},{"type":14,"tag":95,"props":308,"children":309},{"class":108},[310],{"type":26,"value":129},{"type":14,"tag":95,"props":312,"children":313},{"class":102},[314],{"type":26,"value":115},{"type":14,"tag":95,"props":316,"children":318},{"class":97,"line":317},9,[319],{"type":14,"tag":95,"props":320,"children":321},{},[322],{"type":26,"value":224},{"type":14,"tag":95,"props":324,"children":326},{"class":97,"line":325},10,[327,331,335,339,343,347,351],{"type":14,"tag":95,"props":328,"children":329},{"class":102},[330],{"type":26,"value":124},{"type":14,"tag":95,"props":332,"children":333},{"class":108},[334],{"type":26,"value":129},{"type":14,"tag":95,"props":336,"children":337},{"class":102},[338],{"type":26,"value":134},{"type":14,"tag":95,"props":340,"children":341},{"class":137},[342],{"type":26,"value":140},{"type":14,"tag":95,"props":344,"children":345},{"class":102},[346],{"type":26,"value":145},{"type":14,"tag":95,"props":348,"children":349},{"class":148},[350],{"type":26,"value":151},{"type":14,"tag":95,"props":352,"children":353},{"class":102},[354],{"type":26,"value":115},{"type":14,"tag":95,"props":356,"children":358},{"class":97,"line":357},11,[359,363,367,371,375,379,384,389,393],{"type":14,"tag":95,"props":360,"children":361},{"class":102},[362],{"type":26,"value":164},{"type":14,"tag":95,"props":364,"children":365},{"class":108},[366],{"type":26,"value":129},{"type":14,"tag":95,"props":368,"children":369},{"class":102},[370],{"type":26,"value":134},{"type":14,"tag":95,"props":372,"children":373},{"class":137},[374],{"type":26,"value":140},{"type":14,"tag":95,"props":376,"children":377},{"class":102},[378],{"type":26,"value":145},{"type":14,"tag":95,"props":380,"children":381},{"class":148},[382],{"type":26,"value":383},"\"_float:none!\"",{"type":14,"tag":95,"props":385,"children":386},{"class":102},[387],{"type":26,"value":388},">I'm not floating.\u003C/",{"type":14,"tag":95,"props":390,"children":391},{"class":108},[392],{"type":26,"value":129},{"type":14,"tag":95,"props":394,"children":395},{"class":102},[396],{"type":26,"value":115},{"type":14,"tag":95,"props":398,"children":400},{"class":97,"line":399},12,[401,405,409],{"type":14,"tag":95,"props":402,"children":403},{"class":102},[404],{"type":26,"value":207},{"type":14,"tag":95,"props":406,"children":407},{"class":108},[408],{"type":26,"value":129},{"type":14,"tag":95,"props":410,"children":411},{"class":102},[412],{"type":26,"value":115},{"type":14,"tag":95,"props":414,"children":416},{"class":97,"line":415},13,[417,422,426],{"type":14,"tag":95,"props":418,"children":419},{"class":102},[420],{"type":26,"value":421},"\u003C/",{"type":14,"tag":95,"props":423,"children":424},{"class":108},[425],{"type":26,"value":68},{"type":14,"tag":95,"props":427,"children":428},{"class":102},[429],{"type":26,"value":430},">",{"type":14,"tag":432,"props":433,"children":434},"content-alert",{},[435],{"type":14,"tag":28,"props":436,"children":437},{},[438],{"type":26,"value":439},"Float utilities do not affect flex items.",{"type":14,"tag":441,"children":442},"style",[443],{"type":26,"value":444},".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;}",{"title":7,"searchDepth":118,"depth":118,"links":446},[447],{"id":23,"depth":118,"text":9},"markdown","content:docs:utilities:css:float.md","content","docs/utilities/css/float.md","md",1794582261566]