Какие методы «clearfix» я могу использовать? - PullRequest
Новая
       87

Какие методы «clearfix» я могу использовать?

844 голосов
/ 17 октября 2008

У меня есть давняя проблема div, оборачивающая макет из двух столбцов. Моя боковая панель всплыла, поэтому мой контейнер div не может обернуть содержимое и боковую панель. 

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Похоже, существует множество способов исправления ошибки в Firefox:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

В моей ситуации единственное, что, кажется, работает правильно - это решение <br clear="all"/>, которое немного неопрятно. overflow:auto дает мне мерзкие полосы прокрутки, а overflow:hidden обязательно должен иметь побочные эффекты. Кроме того, IE7, очевидно, не должен страдать от этой проблемы из-за его неправильного поведения, но в моей ситуации он страдает так же, как Firefox.

Какой метод, доступный в настоящее время для нас, является наиболее надежным?

Ответы [ 28 ]

7 голосов
/ 18 августа 2011

Я всегда плаваю в основных разделах своей сетки и применяю clear: both; к нижнему колонтитулу. Это не требует дополнительного div или класса.

5 голосов
/ 07 июля 2010

честно; все решения кажутся хаком, чтобы исправить ошибку рендеринга ... я не прав?

Я нашел <br clear="all" /> самым простым, простым. видение class="clearfix" повсюду не может затронуть чувства того, кто возражает против посторонних элементов разметки, не так ли? Вы просто рисуете проблему на другом холсте.

Я также использую решение display: hidden, которое прекрасно и не требует дополнительных объявлений классов или разметки html ... но иногда вам нужны элементы для переполнения контейнера, например. красивые ленты и пояса

5 голосов
/ 15 марта 2013 
.clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}
4 голосов
/ 20 марта 2013

С LESS (http://lesscss.org/), можно создать удобный помощник по очистке: 

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

А затем используйте его с проблемными контейнерами, например: 

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}
4 голосов
/ 27 августа 2009

Использование overflow:hidden / auto и высоты для ie6 будет достаточно, если у плавающего контейнера есть родительский элемент.

Любой из #test может сработать, чтобы приведенный ниже HTML-код очищал плавающие числа. 

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

В тех случаях, когда это отказывается работать с ie6, просто отправьте родительский элемент, чтобы очистить float. 

#test {
  float: left; // using float to clear float
  width: 99%;
}

Никогда еще не требовалось никакого другого вида очистки. Может быть, так я пишу свой HTML.

4 голосов
/ 02 сентября 2012

Я перепробовал все эти решения, большой элемент будет добавлен к элементу <html> автоматически, когда я использую код ниже: 

.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

Наконец, я решил проблему с запасом, добавив font-size: 0; к вышеупомянутому CSS.

4 голосов
/ 05 мая 2014

При использовании SASS прозрачный код: 

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

и используется как: 

.container {
    @include clearfix;
}

если вы хотите новое исправление: 

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}
3 голосов
/ 26 октября 2012

Очистка - это способ автоматического удаления элемента после себя, так что вам не нужно добавлять дополнительную разметку. 

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

Обычно вам нужно сделать что-то следующее: 

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

С clearfix вам нужно всего лишь 

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
3 голосов
/ 26 мая 2010

Я бы тоже плавал #content, чтобы оба столбца содержали плавающие числа. Кроме того, потому что это позволит вам очистить элементы внутри #content без очистки боковой панели.

То же самое с оберткой, вам нужно сделать ее контекстом форматирования блока, чтобы обернуть два столбца.

В этой статье упоминается несколько триггеров, которые вы можете использовать: контексты форматирования блока .

3 голосов
/ 17 августа 2017

Новое отображаемое значение отображается в одной строке. 

display: flow-root;

Из спецификации w3: «Элемент генерирует блок контейнера блока и размещает его содержимое, используя компоновку потока. Он всегда устанавливает новый контекст форматирования блока для его содержимого».

Информация: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Как показано в ссылке выше, поддержка в настоящее время ограничена, поэтому может быть полезна резервная поддержка, как показано ниже: https://github.com/fliptheweb/postcss-flow-root

Страница:
...