clearfix
Блок предоставляет СSS-класс, реализующий прием верстки clearfix, также известный как Easy Clearing Hack. Прием позволяет отменить обтекание для элементов с CSS-свойством float, без внесения изменений в исходную HTML-структуру документа.
Блок можно использовать в качестве контейнера для элементов со свойством float, или примешивая его к такому контейнеру.
Пример использования в качестве контейнера:
Open in a new window<div class="header" style="border: 2px solid blue;">Top element</div>
<div class="clearfix" style="border: 2px dotted yellow;">
<div class="float" style="float: left; border: 1px solid green;">Floating item 1</div>
<div class="float" style="float: left; border: 1px solid green;">Floating item 2</div>
</div>
<div class="footer" style="border: 2px solid red">Footer</div>
[
{
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'
}
]
[
'header',
'clearfix',
'float',
'footer'
]
Примешивание к блоку-контейнеру:
Open in a new window<div class="header" style="border: 2px solid blue;">Top element</div>
<div class="some-container clearfix" style="border: 2px dotted yellow;">
<div class="float" style="float: left; border: 1px solid green;">Floating item 1</div>
<div class="float" style="float: left; border: 1px solid green;">Floating item 2</div>
</div>
<div class="footer" style="border: 2px solid red">Footer</div>
[
{
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'
}
]
[
'header',
'some-container',
'clearfix',
'float',
'footer'
]
Публичные технологии блока
Блок реализован в технологиях: