{"id":24905,"date":"2020-06-16T21:13:25","date_gmt":"2020-06-16T13:13:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24905"},"modified":"2020-06-16T17:48:21","modified_gmt":"2020-06-16T09:48:21","slug":"css-floats","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-floats\/","title":{"rendered":"CSS Floats Explained in Five Questions"},"content":{"rendered":"

CSS \"Floats\" (floating elements) are simple to use but once used, the effect it has on the elements around it sometimes get unpredictable. If you have ever come across the problems of vanishing nearby elements or floats that poke out like a sore thumb, worry no more.<\/p>\n

This post covers five basic questions that will help you become an expert at floating elements.<\/p>\n

    \n
  1. Which elements don\u2019t float?<\/a><\/li>\n
  2. What happens to an element when it floats?<\/a><\/li>\n
  3. What happens to the siblings of \"Floats\"?<\/a><\/li>\n
  4. What happens to a parent of a \"Float\"?<\/a><\/li>\n
  5. How do you clear \"Floats\"?<\/a><\/li>\n<\/ol>\n

    For readers who addopt the TL;dr approach to life, there\u2019s a summary near the end of the post.<\/p>\n

    1. Which elements don\u2019t float?<\/h2>\n

    An absolute<\/strong> or fixed positioned element<\/strong> won\u2019t float. So the next time you encounter a float that isn\u2019t working, check if it is in position:absolute<\/code> or position:fixed<\/code> and apply changes accordingly.<\/p>\n

    2. What happens to an element when it floats?<\/h2>\n

    When an element is tagged \"float\" it runs to either the left or the right basically until it hits the wall of its container element<\/strong>. Alternatively, it will run until it hits another floating element that has already hit the same wall. <\/strong>They\u2019ll keep piling up side by side until the space runs out, and newer incoming ones will be moved down.<\/p>\n

    Floating elements also won\u2019t go above the elements before<\/em> it<\/strong> in the code, something you need to consider before coding a \u201cFloat\u201d after<\/em> an element to the side of which you want to float it.<\/p>\n

    \"float<\/figure>\n

    Here are two more things that happen to a floating element depending on what type of element is being kept floating:<\/p>\n

    An inline element will turn into a block-level element when floated<\/h3>\n

    Ever wondered why suddenly you\u2019re able to assign height & width to a floating span<\/code>? That\u2019s because all the elements when floated will get the value block<\/code> for its display<\/code> attribute (inline-table<\/code> will get table<\/code>) making them block level elements.<\/p>\n

    \"floating<\/figure>\n

    A block element of unspecified width will shrink to fit its content when floated<\/h3>\n

    Usually, when you don\u2019t specify width to a block element, its width is the default 100%. But when floated, that\u2019s no more the case; the block element\u2019s box will shrink until its contents remain visible.<\/p>\n

    \"floating<\/figure>\n

    3. What happens to The Siblings of \"Floats\"?<\/h2>\n

    When you decide to float an element among a bunch of elements don\u2019t worry about how it\u2019s going to behave, its behavior will be predictable and will either move left or right. What you should really be thinking about is how the siblings after it are going to behave<\/strong>.<\/p>\n

    \"Floats\" have the most caring and obedient later siblings in the entire world. They\u2019ll do everything in their power to accommodate a floating element.<\/p>\n

    The text and inline elements <\/strong>will simply make way for the \"Floats\" and will surround the \"Float\"<\/strong> when it\u2019s in position.<\/p>\n

    The block elements <\/strong>will go a step further and will wrap themselves around a \"Float\"<\/strong> generously, even if it means kicking out their own child elements to make space for the \"Float\".<\/p>\n

    Let\u2019s check this out in an experiment. Below are a blue box and after it is a red box of the same size with some child elements.<\/p>\n