Merge 0cfea09 into c58678c

common.blocks/clearfix/clearfix.ru.md

@@ -0,0 +1,69 @@
+# clearfix
+
+Блок реализует популярный CSS-прием **clearfix**, также известный как [Easy Clearing Hack](http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). Прием позволяет отменить обтекание для элементов с CSS-свойством `float`, без внесения изменений в исходную HTML-структуру документа.
+
+Блок реализован в технологии CSS и подходит для использования в клиентских приложениях.
+
+Блок можно использовать в качестве контейнера для элементов со свойством `float`, или примешивая его к такому контейнеру.
+
+Пример использования в качестве контейнера:
+
+```bemjson
+({
+    block: 'header',
+    attrs: { style: 'border: 2px solid blue' },
+    content: 'Top element'
+},
+{
+    block: 'clearfix',
+    attrs: { style: 'border: 2px dotted yellow' },   
+    content: [
+    {
+        block: 'float',
+        attrs: { style: { 'float: left', 'border: 1px solid green' }}
+        content: `Floating item 1`
+    },
+    {
+        block: 'float',
+        attrs: { style: { 'float: left', 'border: 1px solid green' }},
+        content: `Floating item 2`
+    }],
+{
+    block: 'footer',
+    attrs: { style: 'border: 2px solid red' },
+    content: 'Footer'
+}
+});
+```
+
+
+Примешивание к блоку-контейнеру:
+
+```bemjson
+({
+    block: 'header',
+    attrs: { style: 'border: 2px solid blue' },
+    content: 'Top element'
+},
+{
+    block: 'some-container',
+    mix: [{ block: 'clearfix' }],
+    attrs: { style: 'border: 2px dotted yellow' },
+    content: [
+    {
+        block: 'float',
+        attrs: { style: { 'float: left', 'border: 1px solid green' }},
+        content: `Floating item 1`
+    },
+    {
+        block: 'float',
+        attrs: { style: { 'float: left', 'border: 1px solid green' }},
+        content: `Floating item 2`
+    }],
+{
+    block: 'footer',
+    attrs: { style: 'border: 2px solid red' },
+    content: 'Footer'
+}
+});
+```