{"id":259,"date":"2021-03-22T18:49:41","date_gmt":"2021-03-22T18:49:41","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=259"},"modified":"2021-03-22T19:16:34","modified_gmt":"2021-03-22T19:16:34","slug":"css-clearfix-how-to-clear-floats","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/css-clearfix-how-to-clear-floats\/","title":{"rendered":"CSS Clearfix: How to Clear Floats in this Tutorial With 5 Clearfixes"},"content":{"rendered":"\n<p>Here we will explore&nbsp;<strong>5 different CSS clearfix<\/strong>&nbsp;options. A&nbsp;<strong>\u201cCSS clearfix\u201d<\/strong>&nbsp;is often needed to clear floats.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Examples 1-3 clear floats by applying a CSS class to a p tag. The p tag holds a \u201cnon-breaking space\u201d &#8211; ascii code for space is \u201c&nbsp;\u201d<\/li><li>Examples 4 and 5 clear floats by applying the&nbsp;<strong>CSS clearfix class<\/strong>&nbsp;in a different manner. The clearfix is applied to a div tag that contains the floated items.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">No CSS Clearfix Applied Code<\/h2>\n\n\n\n<p>Below is an example\u00a0<em>without a CSS clearfix<\/em>\u00a0applied. Columns 1-3 (green, red, orange) are \u201cfloated\u201d using CSS. A\u00a0<strong>CSS clearfix<\/strong>\u00a0is needed to fix the way the pink column is displayed. Green is Chartreuse. There is a div with a blue border around it to illustrate different clearfix methods. There are\u00a0<strong>5 CSS clearfix examples below<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"border: 1px solid blue; padding: 5px;\">\n  &lt;div style=\"float: left; width: 33%; background: Chartreuse;\">Column 1&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: red;\">Column 2 Column 2 Column 2&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: orange;\">Column 3 Column 3&lt;\/div>\n  &lt;div style=\"width: 50%; background: pink;\">A CSS clearfix is needed to clear this correctly.&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">No CSS Clearfix Applied Result<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"59\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/1111.jpg\" alt=\"\" class=\"wp-image-260\" srcset=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/1111.jpg 781w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/1111-300x23.jpg 300w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/1111-768x58.jpg 768w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/1111-696x53.jpg 696w\" sizes=\"auto, (max-width: 781px) 100vw, 781px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 1 Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">&lt;!--\n.clearfix {  \n    clear: both;\n    height:1px;\n    overflow:hidden;\n    margin-bottom:-1px;\n    line-height:1%;\n    font-size:0px;\n}\n-->&lt;\/style>\n&lt;div style=\"border: 1px solid blue; padding: 5px;\">\n  &lt;div style=\"float: left; width: 33%; background: Chartreuse;\">Column 1&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: red;\">Column 2 Column 2 Column 2&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: orange;\">Column 3Column 3&lt;\/div>\n  &lt;div style=\"width: 50%; background: pink;\">A CSS clearfix is needed to clear this correctly.&lt;\/div>\n  &lt;p class=\"clearfix\"> &lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 1 Result<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"68\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/222.jpg\" alt=\"\" class=\"wp-image-261\" srcset=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/222.jpg 791w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/222-300x26.jpg 300w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/222-768x66.jpg 768w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/222-696x60.jpg 696w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 2 Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">&lt;!--\n.clearfix {\n    clear: both;  \n    height: 0; \n    font-size: 1px; \n    line-height: 0px; \n    display: block; \n}\n-->&lt;\/style>\n&lt;div style=\"border: 1px solid blue; padding: 5px;\">\n  &lt;div style=\"float: left; width: 33%; background: Chartreuse;\">Column 1&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: red;\">Column 2 Column 2 Column 2&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: orange;\">Column 3 Column 3&lt;\/div>\n  &lt;div style=\"width: 50%; background: pink;\">A CSS clearfix is needed to clear this correctly.&lt;\/div>\n  &lt;p class=\"clearfix\">&amp;nbsp;&lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 2 Result<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"83\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/333.jpg\" alt=\"\" class=\"wp-image-262\" srcset=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/333.jpg 794w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/333-300x31.jpg 300w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/333-768x80.jpg 768w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/333-696x73.jpg 696w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 3 Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">&lt;!--\n.clearfix {\n    clear: both;\n    font-size: 1px;\n    line-height: 0px;\n    height: 0px;\n}\n-->&lt;\/style>\n&lt;div style=\"border: 1px solid blue; padding: 5px;\">\n  &lt;div style=\"float: left; width: 33%; ;background: Chartreuse;\">Column 1&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: red;\">Column 2 Column 2 Column 2&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: orange;\">Column 3 Column 3&lt;\/div>\n  &lt;div style=\"width: 50%; background: pink;\">A CSS clearfix is needed to clear this correctly.&lt;\/div>\n  &lt;p class=\"clearfix\"> &lt;\/p>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 3 Result<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"803\" height=\"85\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/4444.jpg\" alt=\"\" class=\"wp-image-263\" srcset=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/4444.jpg 803w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/4444-300x32.jpg 300w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/4444-768x81.jpg 768w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/4444-696x74.jpg 696w\" sizes=\"auto, (max-width: 803px) 100vw, 803px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Thierry Koblentz &#8211; Nicolas Gallagher Clearfix Example Result &#8211; Example 4 Code<\/h2>\n\n\n\n<p>This is&nbsp;<strong>example 4<\/strong>. The&nbsp;<strong>CSS clearfix<\/strong>&nbsp;is applied differently here. It is applied to the div tag that contains the floated elements.&nbsp;<strong>After<\/strong>&nbsp;the div tag closes, it clears the float.<\/p>\n\n\n\n<p>The next 2 methodologies apply the&nbsp;<em><strong>CSS clearfix in a different way<\/strong><\/em>. The CSS clearfix class is applied to the div with the blue border. It contains the first 3 columns. The div with the blue border will contain the floated divs that need a clearfix.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">&lt;!--\n\/**\n * For modern browsers\n * 1. The space content is one way to avoid an Opera bug when the\n *    contenteditable attribute is included anywhere else in the document.\n *    Otherwise it causes space to appear at the top and bottom of elements\n *    that are clearfixed.\n * 2. The use of `table` rather than `block` is only necessary if using\n *    `:before` to contain the top-margins of child elements.\n *\/\n.clearfix:before,\n.clearfix:after {\n    content: \" \"; \/* 1 *\/\n    display: table; \/* 2 *\/\n}\n \n.clearfix:after {\n    clear: both;\n}\n \n\/**\n * For IE 6\/7 only\n * Include this rule to trigger hasLayout and contain floats.\n *\/\n.clearfix {\n    *zoom: 1;\n}\n-->&lt;\/style>\n&lt;div class=\"clearfix\" style=\"border: 1px solid blue; padding: 5px;\"> &lt;!-- CSS clearfix applied here. -->\n  &lt;div style=\"float: left; width: 33%; ;background: Chartreuse;\">Column 1&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: red;\">Column 2 Column 2 Column 2&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: orange;\">Column 3 Column 3&lt;\/div>\n  &lt;div style=\"width: 50%; background: pink;\">A CSS clearfix is needed to clear this correctly.&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Thierry Koblentz &#8211; Nicolas Gallagher Clearfix Example Result\u00a0&#8211; Example 4 Result<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"86\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/555.jpg\" alt=\"\" class=\"wp-image-264\" srcset=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/555.jpg 794w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/555-300x32.jpg 300w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/555-768x83.jpg 768w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/555-696x75.jpg 696w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 5 Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">&lt;!--\n.clearfix {\n.clearfix:after {\n     visibility: hidden;\n     display: block;\n     font-size: 0;\n     line-height: 0;\n     content: \" \";\n     clear: both;\n     height: 0;\n     width: 0;\n     }\n.clearfix { display: inline-block; }\n\/* start commented backslash hack \\*\/\n* html .clearfix { height: 1%; }\n.clearfix { display: block; }\n\/* close commented backslash hack *\/\n}\n-->&lt;\/style>\n&lt;div class=\"clearfix\" style=\"border: 1px solid blue; padding: 5px;\">  &lt;!-- CSS clearfix applied here. -->\n  &lt;div style=\"float: left; width: 33%; background: Chartreuse;\">Column 1&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: red;\">Column 2 Column 2 Column 2&lt;\/div>\n  &lt;div style=\"float: left; width: 33%; background: orange;\">Column 3 Column 3&lt;\/div>\n  &lt;div style=\"width: 50%; background: pink;\">A CSS clearfix is needed to clear this correctly.&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Clearfix Example 5 Result<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"811\" height=\"78\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/666.jpg\" alt=\"\" class=\"wp-image-265\" srcset=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/666.jpg 811w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/666-300x29.jpg 300w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/666-768x74.jpg 768w, https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/666-696x67.jpg 696w\" sizes=\"auto, (max-width: 811px) 100vw, 811px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here we will explore&nbsp;5 different CSS clearfix&nbsp;options. A&nbsp;\u201cCSS clearfix\u201d&nbsp;is often needed to clear floats. Examples 1-3 clear floats by applying a CSS class to a p tag. The p tag holds a \u201cnon-breaking space\u201d &#8211; ascii code for space is \u201c&nbsp;\u201d Examples 4 and 5 clear floats by applying the&nbsp;CSS clearfix class&nbsp;in a different manner. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-259","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":1,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/259\/revisions\/267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/266"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}