krot

float и выпадание из потока

Nov 21st, 2017
105
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .columns-container:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0; }
  2. .clearfix::after {
  3.     content: "";
  4.     display: table;
  5.     clear: both;
  6. }
  7.  
  8. Решение #1. Явно задать высоту контейнера. В тех случаях, когда известно какими должны быть размеры контейнера, это самое простое решение.
  9.  
  10. Решение #2. Добавить пустой блок с clear: both. Добавление подобного элемента отчищает «плавучесть» блоков и заставляет контейнер растягиваться на всю высоту. Семантически это не самое лучшее решение, так как вводит лишний элемент разметки..clearfix { clear:both;
  11.     height:0;}<div class="columns-container">el..<div class="clearfix"></div>
  12.  
  13. Решение #3. Применить свойство overflow: auto (или hidden) к контейнеру. Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы включать плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки или скрыть их. Впрочем, иногда это случается, поэтому будьте осторожны.
  14.  
  15.  
  16. /* `Clear Floated Elements
  17. ----------------------------------------------------------------------------------------------------*/
  18.  
  19. /* http://sonspring.com/journal/clearing-floats */
  20.  
  21. .clear {
  22.   clear: both;
  23.   display: block;
  24.   overflow: hidden;
  25.   visibility: hidden;
  26.   width: 0;
  27.   height: 0;
  28. }
  29.  
  30. /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
  31.  
  32. .clearfix:before,
  33. .clearfix:after,
  34. .container_12:before,
  35. .container_12:after {
  36.   content: '.';
  37.   display: block;
  38.   overflow: hidden;
  39.   visibility: hidden;
  40.   font-size: 0;
  41.   line-height: 0;
  42.   width: 0;
  43.   height: 0;
  44. }
  45.  
  46. .clearfix:after,
  47. .container_12:after {
  48.   clear: both;
  49. }
  50.  
  51. /*
  52.   The following zoom:1 rule is specifically for IE6 + IE7.
  53.   Move to separate stylesheet if invalid CSS is a problem.
  54. */
  55.  
  56. .clearfix,
  57. .container_12 {
  58.   zoom: 1;
  59. }
RAW Paste Data