|
|
|
|
|
|
by err4nt
3805 days ago
|
|
|
I'd be worried about both! If you have to clear a float, you can do it even more cleanly in CSS by using a psuedo element. The old trick was to set `overflow: hidden` on the element containing floated items so it would always expand to contain it - but then things like box-shadows get cut off by the containing element. To get around this, you can use an `:after` pseudo-element on the element that contains the float items. This comes after the last floated item and automatically clear the float without needing `overflow: hidden`. Imagine markup like this: <main>
<section></section>
<section></section>
</main>
.section {
float: left;
}
main:after {
content: '';
display: block;
clear: both;
}
The advantage of clearing a float this way over sticking `<div style=clear:both></div>` or a `.clearfix` class in your HTML is that when doing responsive design, my method keeps the clear in your CSS (and possibly only one @media query). With a `<div>` or class in your HTML you have to deal with that element at all widths - now do you have to specifically override your `.clearfix` class inside a @media query when doing responsive styles? How intuitive is that? |
|
|