{"id":14051,"date":"2011-09-05T20:43:10","date_gmt":"2011-09-06T03:43:10","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14051"},"modified":"2023-01-23T09:15:30","modified_gmt":"2023-01-23T17:15:30","slug":"float","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/float\/","title":{"rendered":"float"},"content":{"rendered":"\n<p>The <code>float<\/code> property in CSS is used for positioning and layout on web pages. A common usage might be floating an image to one side and letting text wrap around it. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.intro-img {\n  float: left;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">float = \n  block-start      |\n  block-end        |\n  inline-start     |\n  inline-end       |\n  snap-block       |\n  &lt;snap-block()>   |\n  snap-inline      |\n  &lt;snap-inline()>  |\n  left             |\n  right            |\n  top              |\n  bottom           |\n  none             |\n  footnote         \n\n&lt;snap-block()> = \n  snap-block( &lt;length> , [ start | end | near ]? )  \n\n&lt;snap-inline()> = \n  snap-inline( &lt;length> , [ left | right | near ]? )  <\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial value:<\/strong> <code>none<\/code><\/li>\n\n\n\n<li><strong>Applies to:<\/strong> all elements, but has no effect if the value of&nbsp;<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\"><code>display<\/code><\/a>&nbsp;is&nbsp;<code>none<\/code>.<\/li>\n\n\n\n<li><strong>Inherited:<\/strong> no<\/li>\n\n\n\n<li><strong>Computed value:<\/strong> as specified<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> discrete<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\nfloat: left;\nfloat: right;\nfloat: none;\nfloat: inline-start;\nfloat: inline-end;\n\n\/* Global values *\/\nfloat: inherit;\nfloat: initial;\nfloat: revert;\nfloat: revert-layer;\nfloat: unset;<\/code><\/pre>\n\n\n\n<ul>\n<li><code>none<\/code>: the element does not float. This is the initial value.<\/li>\n\n\n\n<li><code>left<\/code>: floats the element to the left of its container.<\/li>\n\n\n\n<li><code>right<\/code>: floats the element to the right of its container.<\/li>\n\n\n\n<li><code>inline-start<\/code>: the logical equivalent of <code>left<\/code> based on the <code>writing-mode<\/code>.<\/li>\n\n\n\n<li><code>inline-end<\/code>: the logical equivalent of <code>right<\/code> based on the <code>writing-mode<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-explanation\">An element that is floated is automatically <code>display: block;<\/code><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"what-does-float-mean\">What does &#8220;float&#8221; mean?<\/h3>\n\n\n<p>To understand the purpose and origin of <code>float<\/code>, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called &#8220;text wrap&#8221;. Here is an example of that.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"270\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/print-layout.png?resize=540%2C270&#038;ssl=1\" alt=\"\" class=\"wp-image-335542\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/print-layout.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/print-layout.png?resize=300%2C150&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn&#8217;t even there. This is the difference between that image being part of the <em>flow<\/em> of the page (or not). Web design is very similar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"270\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/web-text-wrap.png?resize=540%2C270&#038;ssl=1\" alt=\"\" class=\"wp-image-335543\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/web-text-wrap.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/web-text-wrap.png?resize=300%2C150&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In web design, page elements with the CSS <code>float<\/code> property applied to them are just like the images in the print layout where the text flows around them. Floated elements <em>remain a part of the flow of the web page<\/em>. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are <strong>removed<\/strong> from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements, and other elements will not affect them, whether they touch each other or not.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"demo\">Demo<\/h4>\n\n\n<p>This demo shows an article with two images: one set to <code>float: left<\/code>, and one set to <code>float: right<\/code>. Press the &#8220;toggle floats&#8221; button to toggle the floats off and on.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_9fbe5755324cb9d3ca4a4060fdcd3058\" src=\"\/\/codepen.io\/anon\/embed\/9fbe5755324cb9d3ca4a4060fdcd3058?height=550&amp;theme-id=1&amp;slug-hash=9fbe5755324cb9d3ca4a4060fdcd3058&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 9fbe5755324cb9d3ca4a4060fdcd3058\" title=\"CodePen Embed 9fbe5755324cb9d3ca4a4060fdcd3058\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"floats-for-layout\">Floats for layout<\/h3>\n\n\n<p>Aside from the simple example of wrapping text around images, floats can be used to create <strong>entire web layouts<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"240\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/web-layout_twn1lb.png?resize=540%2C240&#038;ssl=1\" alt=\"\" class=\"wp-image-335544\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/web-layout_twn1lb.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/web-layout_twn1lb.png?resize=300%2C133&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Floats are also helpful for layout in smaller instances. Take for example this little area of a web page. If we use <code>float<\/code> for our avatar image, when that image changes size the text in the box will reflow to accommodate it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"177\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/reflow-example-1_b22ipv.png?resize=540%2C177&#038;ssl=1\" alt=\"\" class=\"wp-image-335545\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/reflow-example-1_b22ipv.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/reflow-example-1_b22ipv.png?resize=300%2C98&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>This same layout could be accomplished using relative positioning on the container and absolute positioning on the avatar as well. But, when it&#8217;s done that way, the text would be unaffected by the avatar, and would not be able to reflow on a size change.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"177\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/reflow-example-2_fi3vod.png?resize=540%2C177&#038;ssl=1\" alt=\"\" class=\"wp-image-335546\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/reflow-example-2_fi3vod.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/reflow-example-2_fi3vod.png?resize=300%2C98&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"demo\">Demo<\/h4>\n\n\n<p>This demo shows an avatar with <code>float: left<\/code> applied. Press the &#8220;toggle image size&#8221; button to see a wider version of the avatar image. Notice that the text reflows to accommodate the image instead of running over the image.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_429479abb959d19657fedd04d8f14007\" src=\"\/\/codepen.io\/anon\/embed\/429479abb959d19657fedd04d8f14007?height=450&amp;theme-id=1&amp;slug-hash=429479abb959d19657fedd04d8f14007&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 429479abb959d19657fedd04d8f14007\" title=\"CodePen Embed 429479abb959d19657fedd04d8f14007\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"clearing-the-float\">Clearing the float<\/h3>\n\n\n<p>Float&#8217;s sister property is <code>clear<\/code>. An element that has the <code>clear<\/code> property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration is more helpful than words:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"195\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/unclearedfooter_xukhzy.png?resize=540%2C195&#038;ssl=1\" alt=\"\" class=\"wp-image-335547\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/unclearedfooter_xukhzy.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/unclearedfooter_xukhzy.png?resize=300%2C108&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In the above example, the sidebar is floated to the right and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float. To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#footer {\n  clear: both;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"230\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/clearedfooter_hk0089.png?resize=540%2C230&#038;ssl=1\" alt=\"\" class=\"wp-image-335548\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/clearedfooter_hk0089.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/clearedfooter_hk0089.png?resize=300%2C128&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Clear has four valid values as well. The value <code>both<\/code> is most commonly used, which clears floats coming from either direction. The values <code>left<\/code> and <code>right<\/code> can be used to only clear the float from one direction respectively. The initial value is <code>none<\/code>, which is typically unnecessary unless it&#8217;s used to explicitly remove a <code>clear<\/code> value that has been set. The value <code>inherit<\/code> makes the element inherit its parent&#8217;s <code>clear<\/code> value. Strangely, Internet Explorer did not support this value until IE8.<\/p>\n\n\n\n<p>Clearing only the <code>left<\/code> or <code>right<\/code> float, while less commonly seen in the wild, definitely has its uses.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"226\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/directionalclearing_kzfb8t.png?resize=540%2C226&#038;ssl=1\" alt=\"\" class=\"wp-image-335549\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/directionalclearing_kzfb8t.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/directionalclearing_kzfb8t.png?resize=300%2C126&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-great-collapse\">The great collapse<\/h3>\n\n\n<p>One of the more bewildering things about working with floats is how they can affect the element that contains them (their &#8220;parent&#8221; element). If a parent element contains nothing but floated elements, its height collapses to nothing. This isn&#8217;t always obvious if the parent doesn&#8217;t contain any visually noticeable background, but it is important to be aware of.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"182\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/collapse_ogqd1o.png?resize=540%2C182&#038;ssl=1\" alt=\"\" class=\"wp-image-335550\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/collapse_ogqd1o.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/collapse_ogqd1o.png?resize=300%2C101&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>As counterintuitive as collapsing may seem, the alternative is worse. Consider this scenario:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"240\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/whywecollapse_dum6ph.png?resize=540%2C240&#038;ssl=1\" alt=\"\" class=\"wp-image-335551\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/whywecollapse_dum6ph.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/whywecollapse_dum6ph.png?resize=300%2C133&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If the block element on top were to have automatically expanded to accommodate the floated element, we would have an unnatural spacing break in the flow of text between paragraphs, with no practical way of fixing it. If this were the case, we designers would be complaining much harder about this behavior than we do about collapsing.<\/p>\n\n\n\n<p>Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float <strong>after<\/strong> the floated elements in the container but <strong>before<\/strong> the close of the container.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"techniques-for-clearing-floats\">Techniques for clearing floats<\/h3>\n\n\n<p>If you are in a situation where you always know what the succeeding element is going to be, you can apply the <code>clear: both;<\/code> value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don&#8217;t typically work out that way and we need to have more float-clearing tools in our toolbox.<\/p>\n\n\n\n<ul>\n<li><strong>The Empty Div Method<\/strong> is, quite literally, an empty div <code>&lt;div style=\"clear: both;\"&gt;&lt;\/div&gt;<\/code>. Sometimes you&#8217;ll see a <code>&lt;br \/&gt;<\/code> element or some other random element used, but div is the most common because it has no browser default styling, doesn&#8217;t have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since it has no contextual meaning to the page and is there purely for presentation. Of course, in the strictest sense, they are right. But, it gets the job done and doesn&#8217;t hurt anybody. <\/li>\n\n\n\n<li><strong>The Overflow Method<\/strong> relies on setting the <code>overflow<\/code> CSS property on a parent element. If this property is set to <code>auto<\/code> or <code>hidden<\/code> on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However, if you find yourself adding a new <code>div<\/code> just to apply this, it is equally as un-semantic as the empty <code>div<\/code> method, and less adaptable. Also bear in mind that the overflow property isn&#8217;t specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.<\/li>\n\n\n\n<li><strong>The Easy Clearing Method<\/strong> (otherwise known as &#8220;clearfix&#8221;) uses a clever CSS pseudo selector (<code>:after<\/code>) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like &#8220;clearfix&#8221; to it. Then apply this CSS:<\/li>\n<\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clearfix:after { \n  content: \"\";\n  visibility: hidden;\n  display: block;\n  height: 0;\n  clear: both;\n}<\/code><\/pre>\n\n\n\n<p>This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn&#8217;t quite the&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200217181014\/http:\/\/www.positioniseverything.net\/easyclearing.html\" rel=\"noopener\">whole story<\/a>, as additional code needs to be used to accomodate for older browsers.&nbsp;<\/p>\n\n\n\n<p class=\"is-style-explanation\">Also see&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20200217181014\/https:\/\/css-tricks.com\/snippets\/css\/clear-fix\/\">this snippet<\/a>&nbsp;which keeps track of the latest and greatest in clearfixes, including the newer &#8220;micro clearfix.&#8221;<\/p>\n\n\n\n<p>Different scenarios call for different float clearing methods. Take for example a grid of blocks, each of different types.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"182\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/grid-blocks_l3irxe.png?resize=540%2C182&#038;ssl=1\" alt=\"\" class=\"wp-image-335552\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/grid-blocks_l3irxe.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/grid-blocks_l3irxe.png?resize=300%2C101&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>To better visually connect the similar blocks, we want to start a new row as we please, in this case when the color changes. We could use either the overflow or easy clearing method if each of the color groups had a parent element. Or, we use the empty div method in between each group. Three wrapping divs that didn&#8217;t previously exist or three after divs that didn&#8217;t previously exist. I&#8217;ll let you decide which is better.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"329\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/grid-blocks-cleared_gfc2sv.png?resize=540%2C329&#038;ssl=1\" alt=\"\" class=\"wp-image-335553\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/grid-blocks-cleared_gfc2sv.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/grid-blocks-cleared_gfc2sv.png?resize=300%2C183&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"problems-with-floats\">Problems with floats<\/h3>\n\n\n<p>Floats often get beat on for being <em>fragile<\/em>. The majority of this fragility came from bugs in IE6 and IE7. As those browsers fade into the past, these bugs are fading along with them. But, it&#8217;s still worth understanding them if you ever need to debug an &#8220;OldIE&#8221;.<\/p>\n\n\n\n<ul>\n<li><strong>Pushdown<\/strong> is a symptom of an element inside a floated item being <em>wider than the float itself<\/em> (typically an image). Most browsers will render the image outside the float, but not have the part sticking out affect other layout. Old versions of IE expanded the float to contain the image, often drastically affecting layout. A common example is an image sticking out of the main content push the sidebar down below.<br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"183\" class=\"wp-image-335554\" style=\"width: 500px;\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/pushdown2_icp0ts.png?resize=500%2C183&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/pushdown2_icp0ts.png?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/pushdown2_icp0ts.png?resize=300%2C110&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><br><em style=\"font-size: inherit;\">Quick fix:<\/em><span style=\"font-size: inherit;\"> Make sure you don&#8217;t have any images that do this, use <\/span><code style=\"background-color: rgb(255, 255, 255);\">overflow: hidden;<\/code><span style=\"font-size: inherit;\"> to cut off excess.<\/span> <\/li>\n\n\n\n<li><strong>Double Margin Bug<\/strong> \u2014 Another thing to remember when dealing with IE 6 is that if you apply a margin in the same direction as the float, it will <a href=\"http:\/\/www.cssnewbie.com\/double-margin-float-bug\/\" rel=\"noopener\">double the margin<\/a>. <em>Quick fix:<\/em> set <code>display: inline<\/code> on the float, and don&#8217;t worry it will remain a block-level element.<\/li>\n\n\n\n<li>The <strong>3px Jog<\/strong> is when text that is up next to a floated element is mysteriously kicked away by 3px like a weird forcefield around the float. <em>Quick fix:<\/em> set a width or height on the affected text.<\/li>\n\n\n\n<li>In IE 7, the <strong>Bottom Margin Bug<\/strong> was when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. <em>Quick fix:<\/em> using bottom padding on the parent instead.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"alternatives\">Alternatives<\/h3>\n\n\n<p>If you need text wrapping around images, there really aren&#8217;t any alternatives for float. Speaking of which, check out this <a href=\"http:\/\/blog.ideashower.com\/post\/15139639050\/css-text-wrapper\" rel=\"noopener\">rather clever technique<\/a> for wrapping text around irregular shapes. But for page layout, there definitely are choices. Eric Sol has an article on A List Apart, <a href=\"http:\/\/alistapart.com\/articles\/fauxabsolutepositioning\" rel=\"noopener\">Faux Absolute Positioning<\/a>, which describes a very interesting technique that in many ways combines the flexibility of floats with the strength of absolute positioning.<\/p>\n\n\n\n<p>CSS3 tackles page layout a couple of ways:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexbox<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/columns\/\">Multi-column Layout<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">Grid Layout<\/a><\/li>\n<\/ul>\n\n\n\n<p>Absolutely positioned floats (e.g. you absolutely position as normal, but the element is still able to affect other elements, like have text wrap around it) were discussed, but I <em>think<\/em> the idea was shelved due to similarities to other more robust layout ideas.Video<\/p>\n\n\n\n<p>I did <a href=\"https:\/\/css-tricks.com\/video-screencasts\/42-all-about-floats-screencast\/\">a screencast<\/a> a while back explaining many of these float concepts.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>All<\/td><td>All<\/td><td>All<\/td><td>All<\/td><td>All<\/td><td>All<\/td><td>All<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul>\n<li><a href=\"https:\/\/w3c.github.io\/csswg-drafts\/css2\/#propdef-float\" rel=\"noopener\">CSS 2.2 Specification<\/a> (<code>float<\/code> property definition)<\/li>\n\n\n\n<li><a href=\"https:\/\/w3c.github.io\/csswg-drafts\/css-logical-1\/#float-clear\" rel=\"noopener\">CSS Logical Propeties and Values, Level 1<\/a> (<code>float<\/code> logical property values)<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/float\" rel=\"noopener\"><code>float<\/code> at MDN<\/a><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2009-07-08\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 25, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/all-about-floats\/\">\n      All About Floats    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2022-08-10\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 10, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/designing-for-long-form-articles\/\">\n      Designing for Long-Form Articles    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/danielschwarz\/\" aria-label=\"Author page of Daniel Schwarz\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/ede12de9a039384052b2634a3f104253?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/ede12de9a039384052b2634a3f104253?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/danielschwarz\/\">\n      Daniel Schwarz    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2011-04-18\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 20, 2011  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/float-center\/\">\n      Faking &#8216;float: center&#8217; with Pseudo Elements    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2014-02-24\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 25, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/float-labels-css\/\">\n      Float Labels with CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2021-04-19\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 19, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/float-an-element-to-the-bottom-corner\/\">\n      Float an Element to the Bottom Corner    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/afiftemani\/\" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/afiftemani\/\">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-14051\">\n\n  <time datetime=\"2013-08-27\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 27, 2013  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/force-marginpadding-element-next-floated-element\/\">\n      Force Margin\/Padding On Element Next To Floated Element    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2020-10-30\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 30, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/in-defense-of-tables-and-floats-in-modern-day-development\/\">\n      In Defense of Tables and Floats in Modern Day Development    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/johnmacpherson\/\" aria-label=\"Author page of John Macpherson\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/e9f0e97cc99b2d51eeb16e4f0af8f411?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/e9f0e97cc99b2d51eeb16e4f0af8f411?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/johnmacpherson\/\">\n      John Macpherson    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2021-02-11\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 11, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/is-css-float-deprecated\/\">\n      Is CSS float deprecated?    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2013-12-27\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 27, 2013  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/make-sure-columns-dont-collapse-horizontally\/\">\n      Make Sure Your Columns Don&#8217;t Collapse Horizontally    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2007-08-09\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 5, 2013  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/the-how-and-why-of-clearing-floats\/\">\n      The How and Why of Clearing Floats    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-14051\">\n\n  <time datetime=\"2017-01-25\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 25, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/end-clearfix-hack\/\">\n      The End of the Clearfix hack?    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/sdrasner\/\" aria-label=\"Author page of Sarah Drasner\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/48cfd8342f9b9e5b7970f63afb0a8ee3?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/48cfd8342f9b9e5b7970f63afb0a8ee3?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/sdrasner\/\">\n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-14051\">\n\n  <time datetime=\"2011-08-03\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 3, 2011  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/the-future-of-css-layouts\/\">\n      The Future of CSS Layouts    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-14051\">\n\n  <time datetime=\"2010-04-12\" title=\"Originally published Sep 5, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 12, 2010  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/containers-dont-clear-floats\/\">\n      Why Containers Don&#8217;t Clear Themselves    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The float property in CSS is used for positioning and layout on web pages. A common usage might be floating an image to one side and letting text wrap around it. Syntax Values An element that is floated is automatically display: block; What does &#8220;float&#8221; mean? To understand the purpose and origin of float, we [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":319912,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-image-threshold\/","url_meta":{"origin":14051,"position":0},"title":"shape-image-threshold","date":"August 27, 2020","format":false,"excerpt":"The CSS shape-image-threshold property sets which pixels are included in the shape of an image when shape-outside is used to define the float area of a CSS element. Let's say we're using a linear gradient to define the float area of a CSS shape. Something like this where we go\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":192767,"url":"https:\/\/css-tricks.com\/snippets\/sass\/fix-number-n-digits\/","url_meta":{"origin":14051,"position":1},"title":"Fix a Number to N Digits","date":"January 9, 2015","format":false,"excerpt":"When dealing with numbers in JavaScript or any other programming language, there is a way to truncate a number after n digits. Unfortunately, there is no such function in Sass. Still, rounding and precision issues do happen when dealing with percentage based grid systems for instance. Here is a Sass\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1371,"url":"https:\/\/css-tricks.com\/video-screencasts\/42-all-about-floats-screencast\/","url_meta":{"origin":14051,"position":2},"title":"#42: All About Floats Screencast","date":"January 12, 2009","format":false,"excerpt":"Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194405,"url":"https:\/\/css-tricks.com\/snippets\/sass\/clamping-number\/","url_meta":{"origin":14051,"position":3},"title":"Clamping a Number","date":"January 28, 2015","format":false,"excerpt":"In computer science, we use the word clamp as a way to restrict a number between two other numbers. When clamped, a number will either keep its own value if living in the range imposed by the two other values, take the lower value if initially lower than it, or\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14027,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/clear\/","url_meta":{"origin":14051,"position":4},"title":"clear","date":"September 5, 2011","format":false,"excerpt":"The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element.\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/clearedfooter.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5985,"url":"https:\/\/css-tricks.com\/snippets\/css\/drop-caps\/","url_meta":{"origin":14051,"position":5},"title":"Drop Caps","date":"March 19, 2010","format":false,"excerpt":"The Accessible Way Your best bet is to watch Ethan's 5-minute video and then reference this: CodePen Embed Fallback The cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=\"firstcharacter\">L<\/span> orem ipsum dolor\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14051"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14051"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14051\/revisions"}],"predecessor-version":[{"id":376657,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14051\/revisions\/376657"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14051"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}