clearfix

问题 Recently I was looking through some website\'s code, and saw that every <div> had a class clearfix . After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix? 回答1: If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts. It's worth noting that today, the use of floated elements for layout is

问题 This question already has answers here : What methods of ‘clearfix’ can I use? (29 answers) Closed 4 years ago . Although elements like <div> s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse. For example: <div> <div style=\"float: left;\">Div 1</div> <div style=\"float: left;\">Div 2</div> </div> The parent div in this example will not expand to contain

问题 I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar. <div id=\"container\"> <div id=\"content\"></div> <div id=\"sidebar\"></div> </div> There seem to be numerous methods of fixing the clear bug in Firefox: <br clear=\"all\"/> overflow:auto overflow:hidden In my situation, the only one that seems to work correctly is the <br clear=\"all\"/> solution, which is a little bit scruffy. overflow:auto