Clearing floats without display property

I know that the old school method for cleaning floats is a class for the clear: both, and that it is usually out of date.

I know that the new school method is width: 100%; overflow: automatic or hidden;

But when I have content dynamically expanding outside the parent container, I cannot use the new school method. In this case, there is a better method than the clear one: both?

+3
source share
2 answers

She is fine, I placed the old thread to consolidate it, but according to the html5 template now it is defacto clearfix:

http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clearfix:after { clear: both; }   
.clearfix { zoom: 1; }

<br>, , . .

+2

" ". - , - clearfix.

№ 1:

#el { 
   overflow:hidden; 
   zoom:1;
}

, visible , , .

№ 2:

#el:after { 
   content:"";
   clear:both;
   display:block;
}
#el { zoom:1; }

clearfix "", , . CSS div, .

, , # 2. # 1. zoom hasLayout , el pre IE7. IE7 + overflow:hidden.

EDIT. , content: "\0020"; - , clearfix, . , , , , .

+2

Source: https://habr.com/ru/post/1775895/


All Articles