Float Describe Floats and how they work.
- Float is a CSS positioning property. If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.
- A floated element is "invisible" to its parent
- Problems with Floats
- Pushdown Quick fix: Make sure you don't have any images that do this, use overflow: hidden to cut off excess.
- Double Margin Bug Quick fix: set display: inline on the float, and don't worry it will remain a block-level element.
- 3px jog Quick fix: set a width or height on the affected text.
- In IE 7, the Bottom Margin Bug Quick fix: using bottom padding on the parent instead.
What are the various clearing techniques and which is appropriate for what context?
- create div and set
clear: both
to style.
<main class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</main>
<footer class="footer clearfix">
</footer>
- Overflow
.clearfix {
overflow: hidden;
position: relative;
zoom:1; // For IE6
}
- Psuedo element
:after
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
https://css-tricks.com/all-about-floats/
Floats are still incredibly common. As this is published, still probably the most cross-browser consistent way to build layout and grids. Anyone who has worked with them is aware of float collapsing. That is, floated element do not add to the height of a parent element. So for example if a parent element contained only floated elements, it would collapse to zero height. You can deal with that like:
- Use a clearfix (bonus points for micro clearfix).
- Float the parent as well.
- Use an overflow property other than "visible" on the parent (bonus points for listing downsides like cutting off shadows).
Bonus points for "create a new block formatting context". Possibly negative points for something like
As a bonus question, you could ask them to compare using inline-block and floats for building a grid. Good answer: there are problems either way. With inline block you need to deal with the whitespace issue. With floats you need to deal with clearing.